如何通过单击杀死 YouTube 视频答案

【问题标题】：How to kill a YouTube video by clicking如何通过单击杀死 YouTube 视频
【发布时间】：2014-07-14 18:54:05
【问题描述】：

我有一个已插入 YouTube 视频的 div，它可以正常播放。但我希望能够单击视频上的某个位置并从 DOM 中删除嵌入代码，因此 div 会回到嵌入代码插入之前的状态，YouTube 视频和播放器完全消失。

我知道有一个 YouTube JavaScript API，但这似乎只是让您向播放器发送命令，例如停止、暂停、播放。我想完全消除播放器，并从 DOM 中删除 iframe 似乎是最好的方法。

问题是我在 YouTube 播放器上单击的任何内容都会被播放器拦截，因此我从未在我的 JavaScript 或 jQuery 中收到点击。有什么方法可以让我在我的 JavaScript 或 jQuery 中感知对 YouTube 播放器的点击？

谢谢

【问题讨论】：

奇怪的是我找不到这个的副本。我的猜测是如果可能的话，用 div 覆盖玩家，并将点击控件转发给玩家并自己处理任何其他点击。那就是说。作为用户，我会讨厌它。而是在容器外部的顶部添加一个 [X] - 如果您想覆盖，那么 duplicate is here

【解决方案1】：

如果您想捕捉点击以便对它们进行操作，请在播放器上方放置一个画布。

进行划分在里面放了一个画布和播放器部分

  canvas.style.zIndex = 2
  box=document.getElementById (div where the player is)
  box.zindex=1

您可能需要设置绝对位置以使它们相互重叠

现在您可以在画布上放置鼠标侦听器并捕获事件。在 Javascript 中，您可以根据需要将点击传递给播放器。 div.click() 或使用 API。

如果您的点击被播放器拾取，您可能还需要使用 event.stopPropagation()。

【讨论】：

【解决方案2】：

当使用 iframe 加载播放器时，由于 Same-Origin-Policy（iframe 链接到不同的域）。

如果您真的想在每次点击播放器时停止并移除播放器（无论点击是在视频上还是在控件上），那么您可以放置一个与播放器大小相同的空 div 元素在它上面并用它来捕捉事件。检查mplungjan提到的问题如何正确overlay opaque div over youtube iframe

一个重要提示：因为这也会阻止指向 youtube 的链接以及上下文菜单，我猜这是使用条款所不允许的。

【讨论】：

我的想法也是如此，但我不确定所有浏览器都会尊重 div 的 z-index 并且 OP 必须捕获控件上的所有交互。以下是如何覆盖 div stackoverflow.com/questions/3820325/…