Question

所以我正在做一点点黑客，在嵌入的YouTube视频（YouTube给我作为iFrame）上显示静止图像。想法是用户将单击静态图像（上面的演示中的一个大的彩色框），然后我使用jQuery隐藏图像并将iFrame放在原处。我将视频设置为自动播放和繁荣，它开始播放。

代码很简单，它是以下几个视频块：

<div class='videoblock yellow'>
    <div data-videoid="7ZLywQpPgcA" class='overlay'>Click this text to play</div>
    <div class="thevideo"></div>
</div>

然后是init同位素的代码，以及在点击时交换YouTube视频的事件处理程序：

$(function() {
    $('#iso').isotope({ itemSelector : '.videoblock' });   
});

// when the user clicks, hide the overlay, put the html code in for the iFrame and show it
$('.overlay').click(function() {
    vid = $(this).data('videoid');
    h = '<iframe width="435" height="265" src="//www.youtube.com/embed/'+vid+'?autoplay=1" frameborder=0 allowfullscreen></iframe>';
    $(this).hide(); $(this).next().show().html(h);
});

jsfiddle现场演示：http://jsfiddle.net/pnoeric/MeL7a/7/

问题在于此技术在Chrome（Mac）和Safari中运行良好，但在Firefox中，点击对YouTube中的视频没有任何影响。暂停按钮不起作用，即使YouTube可以看到我将鼠标悬停在按钮上。

这是为什么？我该如何解决？： - ）

（我也愿意接受任何更好的技术来在YouTube视频上显示静止图像......）

Answer 1

isotope在transform: translate(0px, 0px);元素上使用.videoblock（在您的情况下）。这又会触发Bug 832929 - "Can't interact with iframe flash content when parent node has CSS transforms applied"。

如果可能，请通过options.transformsEnabled停用转换。

在http://jsfiddle.net/nmaier/CkFWV/中这样做可以让它在Firefox中实际运行（实际上是OSX上的Nightly）。

为什么同位素会使点击陷入iFrame？

1 个答案: