jquery - 为什么同位素会扰乱 iFrame 的点击？

Question

所以我做了一些修改，在嵌入的 YouTube 视频(YouTube 以 iFrame 的形式提供给我)上显示静态图像。这个想法是，用户将单击静态图像(上面演示中的一个大彩色框)，然后我使用 jQuery 隐藏图像并将 iFrame 放在原来的位置。我将视频设置为自动播放，然后它开始播放。

代码很简单，就是几个视频 block :

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

然后是初始化同位素的代码，以及点击时在 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 在 .videoblock 元素上使用 transform:translate(0px, 0px); (在您的情况下)。这又会触发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)中运行。