Youtube iframe embedded video does not work (black screen)

Question

On Diveboard, we made a good hack photo for video support

Everything went well until I found that Firefox 11 and 12 beta versions do not play youtube embedded videos ... it seems they are loaded, we can hear pufff sound ads without images ... so instead of using YouTube radio you can see an example here: Video sample page

And I scratched my head again and again, but I don’t know :(: (

EDIT: Apparently, this is a problem only on OSX !!! which makes me even more ignorant ...

Any hint would be appreciated

iframe code is pretty simple:

<iframe width='#{width}' height='#{height}' src='http://www.youtube.com/embed/#{matchdata}?wmode=opaque&autoplay=1' frameborder='0' allowfullscreen></iframe> 

Answer 1

What CSS style do you use in your iframe? http://argylesocial.com used the border radius on youtube html5 iframes, and removing these style declarations resolved the issue.

I had to remove both -moz-border-radius and border-radius in order to get the video to display correctly. Now works like a charm!

Answer 2

Actually this is an FF bug, which is now fixed on mozilla 12/13/14 http://ksso.net/~alex/ff_bug/moz-transform.html

Answer 3

I had the same problem on my website blog that I am developing, I added the height for the iframe because Firefox was missing the height from the height label in the iframe, the solution either adds height using the style tag, but if its a responsive website uses media css for height of iframe tags. An example may explain this better.

If you use a fixed height for an iframe, try adding a style tag in the iframe, as in

 style="height:374px" 

If a responsive site adds an iframe to the media request in css - for example:

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

etc.

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

Thanks!