Youtube iframe embedded video not working (black s

Question

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>

Answer 1

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!

Answer 2

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!

Answer 3

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