CSS转换翻译破坏Youtube嵌入式视频

Question

当我使用transform:translate()在div中使用youtube iframe时,它不允许我在Firefox中播放视频.适用于所有其他浏览器甚至IE8.这是我创建的小提琴http://jsfiddle.net/kE6vp/如果你注释掉转换属性它工作正常,但有了它,youtube按钮无法加入.再次只在Firefox中.以前有人经历过吗？我正在使用jquery同位素插件,它使用transform属性放置内容.谢谢你的帮助.

<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

这似乎是Firefox上的Flash问题,如果您强制使用YouTube的HTML5播放器,那么问题就解决了.

http://jsfiddle.net/8EMzc/

您可以通过附加&html5=1到YouTube的嵌入网址来执行此操作.我想如果不支持HTML5,它将回归Flash,但我不确定.您也可以浏览器嗅探并仅将HTML5播放器提供给Firefox(不推荐,但是您正在解决一个错误,因此没有直接的解决方法).

或者,您可以使用transformsEnabled选项禁用Isotope中的CSS变换

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