3

当我使用 youtube iframe 进出 div 时使用transform: translate()它不允许我在 Firefox 中播放视频。适用于所有其他浏览器，甚至 IE8。这是我创建的小提琴http://jsfiddle.net/kE6vp/如果您注释掉转换属性，它可以正常工作，但是无法访问 youtube 按钮。再次仅在 Firefox 中。以前有人经历过吗？我正在使用 jquery isotope 插件，它使用 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;
}
4

1 回答 1

5

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

http://jsfiddle.net/8EMzc/

您可以通过附加&html5=1到 YouTube 的嵌入 URL 来做到这一点。我想如果不支持 HTML5，它会退回到 Flash，但我不确定这一点。您还可以浏览器嗅探 HTML5 播放器并将其仅提供给 Firefox（不推荐，但您正在解决一个错误，因此没有直接的方法来解决这个问题）。

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

$('#container').isotope({
  transformsEnabled : false
});
于 2013-07-19T14:37:45.633 回答