如何通过单击来终止YouTube视频

Question

我有一个div，我已经插入了一个YouTube视频，这很好用。但是我希望能够点击视频上的某个位置并从DOM中删除嵌入代码，这样div就会回到插入嵌入代码之前的状态，而YouTube视频和播放器完全消失了。

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

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

由于

Answer 1

使用iframe加载播放器时，由于同源政策，您无法捕捉到页面上iframe内发生的事件（ iframe链接到其他域名。）

如果你真的想在每次点击时停止并移除播放器（如果点击在视频或控件上没有遮罩），那么你可以放置一个空的div元素，其大小与玩家通过它并使用它来捕捉事件。检查mplungjan提到的问题如何正确执行此操作overlay opaque div over youtube iframe

一个重要的注意事项：因为这也会阻止指向youtube的链接以及上下文菜单，我猜这个使用条款不允许这样做。

Answer 2

如果您想捕捉点击次数以便对其进行操作，请将画布放在播放器上。

进行分组 在里面放一个画布和玩家师

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

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

现在您可以在画布上放置鼠标侦听器并捕获事件。在Javascript中，如果需要，您可以将点击传递给播放器。 Div.click（）或使用API​​。

如果您的点击被播放器选中，您可能还需要使用event.stopPropagation（）。