为啥同位素会混淆点击 iFrame？

Posted 2023-05-09

【中文标题】为啥同位素会混淆点击 iFrame？

【英文标题】：Why does isotope mess up clicks into an iFrame?为什么同位素会混淆点击 iFrame？

【发布时间】：2013-08-19 12:22:15

【问题描述】：

所以我正在做一些小技巧，以便在嵌入的 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   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 视频上显示静止图像...）

【问题讨论】：

Duopixel 的解决方案是将&html5=1 添加到 YouTube 嵌入 URL。 Firefox supports HTML5 video 回到 3.5 版，所以应该是安全的。

【参考方案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）中工作。

【讨论】：

你是个天才。禁用转换解决了这个问题。谢谢。