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 option

禁用同位素中的CSS变换

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

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

1 个答案: