Question

我有2个iframe，它们都是嵌入式YouTube视频。我想拥有它，以便当用户单击其中一个视频时，它将始终暂停另一个视频（以确保两个视频都不会同时播放。）

下面是我的JS示例

  jQuery( "#video1" ).click(function() {
    console.log("test");
    jQuery('iframe[src*="https://www.youtube.com/embed/"]').each(function(i) {
    this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
    });
  });

下面是我的HTML

<div id="video1" class="col-12 col-md-6 mb-3 mb-md-0">
    <iframe src="https://www.youtube.com/embed/6TI2fdKrT**?&amp;theme=dark&amp;autoplay=1&amp;autohide=2&amp;rel=0&amp;enablejsapi=1" style="width: 100%; height: 270px;"></iframe>
 </div>

<div id="video2" class="col-12 col-md-6 mb-3 mb-md-0">
    <iframe src="https://www.youtube.com/embed/5TI2fdKrT**?&amp;theme=dark&amp;autoplay=1&amp;autohide=2&amp;rel=0&amp;enablejsapi=1" style="width: 100%; height: 270px;"></iframe>
 </div>

我遇到的问题是，当内部有iframe时，我的点击功能不会在＃video1 div上触发。我通过从＃video1 div内删除iframe并添加一些文本并单击它并触发它来进行了测试。

当其中有iframe时，如何使我的点击功能在＃video1 div上触发？

检测对iframe父元素的点击

0 个答案: