为什么同位素会混淆点击 iFrame？

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>

然后是初始化同位素的代码，以及点击时交换 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）中工作。