为什么同位素会把点击变成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>

然后是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中非常有效，但是在火狐中，点击不会对YouTube中的视频产生任何影响。暂停按钮不起作用，尽管YouTube可以看到我在按钮上盘旋。

为什么会这样呢？我该怎么解决呢？:-)

(我也对在YouTube视频上显示静止图像的任何更好的技术开放.)

Answer 1

isotope在.videoblock元素上使用transform: translate(0px, 0px); (在您的例子中)。这反过来触发了Bug 832929 -“当父节点应用CSS转换时，无法与iframe闪存内容交互”。

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

在http://jsfiddle.net/nmaier/CkFWV/中这样做可以使它在火狐中工作(实际上是在OSX上)。