CSS变换翻译破解Youtube嵌入式视频 [英] CSS transform translate breaking Youtube Embedded Video

问题描述

当我使用 transform：translate（） 在div中使用youtube iframe时，它不允许我在Firefox中播放视频。适用于所有其他浏览器，甚至IE8。这里是一个小提琴我创建了 http://jsfiddle.net/kE6vp/ 如果你注释掉transform属性工作正常，但使用它的YouTube按钮不能访问。再次只在Firefox。任何人都体验过吗？我使用jquery同位素插件，使用transform属性放置内容。感谢任何帮助。

When I use a youtube iframe in or out of a div using transform: translate() it doesn't allow me to play the video in Firefox. Works in all other browsers even IE8. Here is a fiddle I created http://jsfiddle.net/kE6vp/ 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.

<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;
}

推荐答案

在Firefox上使用Flash，如果您强制使用YouTube的HTML5播放器，则问题已解决。

It seems this is a problem with Flash on Firefox, if you force YouTube's HTML5 player then the problem is fixed.

http ：//jsfiddle.net/8EMzc/

您可以通过添加& html5 = 1 到YouTube的嵌入网址。我想如果HTML5不被支持，它会回退到Flash，但我不知道这一点。您也可以使用浏览器嗅探，并仅将HTML5播放器投放到Firefox（不推荐，但您正在处理一个错误，因此没有直接的方法解决此问题）。

You do this by appending &html5=1 to YouTube's embed URL. I suppose that if HTML5 is not supported it will fall back to Flash, but I'm not sure about this. You could also browser sniff and serve the HTML5 player to Firefox only (not recommended, but you're working around a bug, so there's no straightforward way to address this).

或者，您可以使用 transformsEnabled选项在同位素中禁用CSS变换

Alternatively, you can disable CSS transforms in Isotope with the transformsEnabled option

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

这篇关于CSS变换翻译破解Youtube嵌入式视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！