为什么同位素搞乱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上，每夜）在我的工作。