title: CSS transform translate breaking Youtube Embedded Video
body: <p>When I use a youtube iframe in or out of a div using <strong><em>transform: translate()</em></strong> it doesn't allow me to play the video in Firefox. Works in all other browsers even IE8. Here is a fiddle I created <a href="http://jsfiddle.net/kE6vp/" rel="nofollow">http://jsfiddle.net/kE6vp/</a> 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.</p>
  
  <pre><code>&lt;div class="pong"&gt;
      &lt;div class="ping"&gt;
          &lt;iframe width="326" height="237" frameborder="0" allowfullscreen="1" src="https://www.youtube.com/embed/lEhu2cFvDe8?wmode=opaque?rel=0?autoplay=1&amp;amp;"&gt;&lt;/iframe&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .pong{
      height: 237px;
      transform: translate(20px, 100px);
      width: 326px;
  }
  
  .ping{
      height: 237px;      
      position: absolute;
      width: 326px;       
  
      z-index: 40000;
  }
  </code></pre>