2

When I try to print a page that has an embedded youtube video on it, it prints out a blank area, whereas a stillshot is displayed on the web. Is it possible to print it out as it appears on the web, or will the youtube video always appear as a blank spot when printing? I'm not trying to print a screenshot; I want the client, when they click the print icon, to see the youtube stillshot on the page once it's printed, instead of a blank spot.

If it always appears as a blank spot, I'll use my noprint stylesheet on it. I've embedded my videos like this:

<iframe id="ShowFrameID" width="640" height="480"            
     src="http://www.youtube.com/embed/6j6OfI9zKVQ? 
 wmode=opaque&amp;modestbranding=1&amp;rel=0">
</iframe>

Any advice anybody can offer would be greatly appreciated!

Jason Weber
  • 5,653
  • 6
  • 40
  • 73

1 Answers1

4

You could set a Background-Image using the Youtube API.

http://img.youtube.com/vi/6j6OfI9zKVQ/0.jpg

Example:

<iframe style="background-image:url('http://img.youtube.com/vi/6j6OfI9zKVQ/0.jpg')" id="ShowFrameID" width="640" height="480" src="http://www.youtube.com/embed/6j6OfI9zKVQ? wmode=opaque&amp;modestbranding=1&amp;rel=0">
</iframe>

Further Informations on SO

Update

Ok, i've verified it. As you can see in the jsfiddle the first and second iframes get printed while the last one does not. Note the additional css stylings in the style attribute. I thought it would be obvious to set these declaration. Sorry for that.

Working fiddle: http://jsfiddle.net/CSvq4/

Example print as pdf (Firefox): http://goo.gl/zBDqt

Note #1: You have to enable your browser to print backgrounds!

Note #2: You should also try to prevent inline styles. It's bad practice and not well maintainable.

Community
  • 1
  • 1
gearsdigital
  • 13,915
  • 6
  • 44
  • 73
  • Hi @gearsdigital. Thank you for taking the time to offer that suggestion. I tried it, but it still (for whatever reason) prints a blank 640 x 480 square instead of the stillshot that's on the webpage. Thank you for the youtube API link, and I'll search through there and see if I can figure out a solution. – Jason Weber Sep 23 '12 at 22:47
  • You're welcome. Feel free do fiddle with the example. But it should work. You could set the background repeat to no-repeat. Maybe it's another issue with your css or something related. Or even your Browser is set to: Don't print backgrounds?! – gearsdigital Sep 23 '12 at 22:49
  • 1
    Or as workaround wrap your iframe in a div with background set to the API Image. – gearsdigital Sep 23 '12 at 22:56
  • I thought that was a good suggestion. Here's what I tried, but it still showed up blank:
    – Jason Weber Sep 23 '12 at 23:26
  • Wow, that's pretty intricate! I have it working for me -- in Chrome, IE, and Safari also! So many engineers print off our website that I might even include the instructions you provided on proper ways to print websites. Everything works great! I really do appreciate you taking the time to help out with this issue -- it was a major pain, but this will help tremendously, especially 'cause I have about a dozen more youtube vids to embed. Again, thank you very much for your help, gears -- it's really going to help us out! – Jason Weber Sep 24 '12 at 12:43
  • Does **not** work with Chrome for Mac - Version 54.0.2840.98 (64-bit) – MrUpsidown Dec 12 '16 at 10:26
  • Does **not** work with Safari Version 10.0 (11602.1.50.0.10) – MrUpsidown Dec 12 '16 at 10:33
  • It worked back in 2012. Good chance YouTube changed the API since then. – gearsdigital Dec 12 '16 at 10:38
  • I don't really think this has to do with the API. Or maybe it has if it *was* important to have that wmode parameter? In any case, it works in your fiddle, using the first option (with the DIV) and adding `display:none;` on the iframe itself. – MrUpsidown Dec 12 '16 at 11:05