4

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>
vsync
  • 118,978
  • 58
  • 307
  • 400
Alexander Casassovici
  • 335
  • 1
  • 3
  • 12
  • 1
    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 Mar 22 '12 at 17:13
  • known bug, please VOTE!!! - https://bugzilla.mozilla.org/show_bug.cgi?id=811547 – vsync May 25 '13 at 21:32
  • 1
    [Duopixel](http://stackoverflow.com/questions/17747443/css-transform-translate-breaking-youtube-embedded-video?answertab=votes#tab-top) has a solution by adding `&html5=1` to the YouTube embed URL. [Firefox supports HTML5 video](http://caniuse.com/video) back to version 3.5 so it should be safe. –  Oct 24 '13 at 15:27

3 Answers3

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!

Joshua Smith
  • 26
  • 1
0

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!

Devraj Gadhavi
  • 3,541
  • 3
  • 38
  • 67
Sneha Samfrancisco
  • 1
  • 1
0

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

Alexander Casassovici
  • 335
  • 1
  • 3
  • 12