CSS 变换翻译破 Youtube 嵌入式视频

Question

当我使用 transform: translate() 在 div 内或外使用 youtube iframe 时，它​​不允许我在 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;
}

Answer 1

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

http://jsfiddle.net/8EMzc/

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

或者，您可以使用 transformsEnabled option 在 Isotope 中禁用 CSS 转换

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