CSS transform translate breaking Youtube Embedded Video

Question

When I use a youtube iframe in or out of a div using transform: translate() it doesn't allow me to play the video in Firefox. Works in all other browsers even IE8. Here is a fiddle I created http://jsfiddle.net/kE6vp/ If you comment out the transform property it works fine, but with it the youtube buttons can't be accesed. Once again only in Firefox. Anyone experience this before? I'm using jquery isotope plugin which places content using the transform property. Thanks for any help.

<div class="pong">
    <div class="ping">
        <iframe width="326" height="237" frameborder="0" allowfullscreen="1" src="https://www.youtube.com/embed/lEhu2cFvDe8?wmode=opaque?rel=0?autoplay=1&amp;"></iframe></div>
</div>

.pong{
    height: 237px;
    transform: translate(20px, 100px);
    width: 326px;
}

.ping{
    height: 237px;      
    position: absolute;
    width: 326px;       

    z-index: 40000;
}

Answer 1

It seems this is a problem with Flash on Firefox, if you force YouTube's HTML5 player then the problem is fixed.

http://jsfiddle.net/8EMzc/

You do this by appending &html5=1 to YouTube's embed URL. I suppose that if HTML5 is not supported it will fall back to Flash, but I'm not sure about this. You could also browser sniff and serve the HTML5 player to Firefox only (not recommended, but you're working around a bug, so there's no straightforward way to address this).

Alternatively, you can disable CSS transforms in Isotope with the transformsEnabled option

$('#container').isotope({
  transformsEnabled : false
});