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&modestbranding=1&rel=0">
</iframe>
Any advice anybody can offer would be greatly appreciated!
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&modestbranding=1&rel=0">
</iframe>
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/
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.