Youtube iframe embedded video not working (black screen)

4
votes

On Diveboard, we made a nice hack of photoswipe to support videos

Everything went well until I discovered Firefox 11 and 12 beta are not playing the youtube videos embedded any more... it seems they are loaded, we can hear sound ad pufff no images... so it's youtube radio instead you can see an example here : Video example page

And i've been scratching my head over and over on that one but I'm clueless :( :(

EDIT : Apparently it's an issue ONLY ON OSX!!! which makes me even more clueless...

Any hint would be apreciated

the iframe code is pretty straightforward: 

<iframe width='#{width}' height='#{height}' src='http://www.youtube.com/embed/#{matchdata}?wmode=opaque&autoplay=1' frameborder='0' allowfullscreen></iframe>
3
cssmacosfirefoxiframeyoutube
So I havent' "SOLVED" it but here are a few hints: the issue comes from the 2 -moz-transform on both parent and parent.parent divs holding the iframe By conditionally loading of ff11+ & OSX a css with #lightbox .ps-carousel-content { -moz-transform: none !important;} #lightbox .ps-carousel-item { -moz-transform: none !important;} the issue is circumvented but the solution is not really satisfactory - Adobe guys please fix your player, FF guys please include h264..., youtube guys please drop flash.... – Alexander Casassovici
known bug, please VOTE!!! - bugzilla.mozilla.org/show_bug.cgi?id=811547 – vsync
Duopixel has a solution by adding &html5=1 to the YouTube embed URL. Firefox supports HTML5 video back to version 3.5 so it should be safe. – user1552119

3 Answers

1
votes

What CSS styling are you using on your iframe? http://argylesocial.com used border-radius on youtube html5 iframes, and removing those style declarations resolved the problem.

I had to remove both -moz-border-radius and border-radius the get video to properly display. Works like a charm now!

0
votes

It's actually a FF bug which is now fixed on mozilla 12 /13/14 http://ksso.net/~alex/ff_bug/moz-transform.html

0
votes

I was getting the same issue on my website blog I am developing, I added height for the iframe as Firefox was not grabbing the height from the height tag in iframe, the solution is either add the height using style tag, but if its a responsive website use the media css for the iframe tags height. The example might explain it better.

If using a fixed height for the iframe then try adding style tag to the iframe as in 

style="height:374px"

If responsive site the add the iframe to the media query in css - eg:

@media screen and (min-width: 100px) and (max-width:768px) { 
    .video iframe {height:200px}
}

and so on.

It worked for me, I hope it will helps others as well.

Thanks!