2

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

4

1 回答 1

1

isotope在元素上使用transform: translate(0px, 0px);（在你的情况下） 。.videoblock这反过来会触发错误 832929 - “当父节点应用了 CSS 转换时，无法与 iframe flash 内容交互”。

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

在http://jsfiddle.net/nmaier/CkFWV/中这样做可以让我在 Firefox（实际上是 OSX 上的 Nightly）中工作。

于 2013-08-17T20:53:20.050 回答