不幸的是,只有当您直接点击YouTube播放器本身时,YouTube才会对视频进行统计.这是为了防止欺诈性的高视图计数.如果您不想最初展示YouTube播放器,一种技巧是在顶部放置不透明的叠加层和图形pointer-events: none.当用户点击您的叠加层时,他们实际上会点击YouTube视频,以便计算视图.然后,您可以捕捉"正在播放"事件并隐藏覆盖物,从而暴露玩家.
我的主页上有图片,当您点击它时会播放YouTube视频.在任何人喊"点击劫持"之前,我并没有试图欺骗任何人 - 图中有一个播放按钮,所以你知道这是一个视频.
除了Mac OS上的FireFox之外,这对我来说完全没问题.我正在使用最新版本 - 目前在我的测试中为34.0.5.
如果您在Chrome/FireFox Windows/Recent IE版本中运行此功能并单击绿色覆盖图,则视频将播放,您将听到音乐.
注意:当然在我的真实页面中,我捕获isplaying事件并隐藏叠加层.
Firefox显然正在进行某种点击劫持保护.如果它认为您试图通过视频覆盖用户欺骗用户,则它将无法播放.然而,对我来说真的很奇怪,它在Windows上也没有这样做.
有两种方法可以让视频在Mac FireFox上播放 - 两者都涉及部分显示下面的Youtube视频:
最奇怪的是 - 当你在iframe中查看它时效果很好(这就是为什么我使用上面打开全屏的GoogleDrive链接)而不是像codepen/jsfiddle这样的东西http://codepen.io/anon /笔/ GgrZNN
我真的在寻找一个不涉及的解决方法if (firefox && mac).如果在mozilla文档中的某处记录了这些,我还没有找到它.
PS.显然,浏览器无需pointer-events通过点击事件进行不同的处理.这个例子中没有显示.
(我正在使用Browserstack.com进行测试,但它在真正的mac上也是如此.)
我在 Firefox Mac 上遇到了同样的问题（并且尚未升级到 Yosemite），但在我看来，您几乎已经解决了自己的问题。我能看到的最简单的解决方案是在当前图层下方添加一个额外的覆盖层，并将它们的不透明度都设置为 0.98（这似乎是您可以继续点击的最高值 - 至少在我的测试中）。
显然，这取决于您希望在覆盖层上显示的内容，但对于我在本地的测试，我将底层覆盖层（对不起，可笑的名称）设置为黑色。这意味着下面的视频是无法察觉的。您甚至可以降低不透明度，但仍然用两层阻挡所有内容，以防不同版本的 Firefox 中点击阻挡的不透明度阈值不同。
.x-overlay {
opacity: 0.98;
...
}
.x-under-overlay {
opacity: 0.98;
position: absolute;
background: rgba(0, 0, 0, 1);
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
注意：即使使用轻微的不透明度，也要注意一个缺点。对于某些浏览器（或至少是浏览器的版本），出现在不透明图层中的文本最终可能会出现错误或缺少抗锯齿功能。但这主要发生在旧版本的 Firefox 和 Chrome 中。
好吧，这让我有点绕墙，或者上弯，或者哪个奇怪的短语可以用来描述不断期待一件事，但不断得到另一件事的经历......这与定义有奇怪的相似之处疯狂的。
为什么在[在这里插入家乡星球]上这对 Codepen 有效，但在我自己的本地主机服务的 iframe 中却不起作用......？
在尝试了许多不同的事情之后，我发现了这个sandbox属性，我之前确实应该注意到这一点；特别是考虑到它可以通过本机浏览器进程启用和禁用所有奇怪的技巧。经过快速试验和一些错误之后，看起来这对大多数在线代码小提琴手来说都有效，如下所示：
<iframe src="index.html" sandbox="allow-scripts allow-same-origin"></iframe>
仍然没有找到确切的原因，但如果我在本地主机框架上启用上述内容，它就会开始工作，而不需要不透明度技巧。我猜它一定会导致 Firefox 通过不同的进程进行路由，或者它可能只是禁用某种跨域点击劫持保护。
一种非常奇怪的情况......这就是我对 Chrome 的期望！火狐浏览器不太好。