jQuery 点击 iframe 视频(youtube)

Posted

技术标签:

【中文标题】jQuery 点击 iframe 视频(youtube)【英文标题】:jQuery click on iframe video (youtube) 【发布时间】:2018-02-07 10:34:01 【问题描述】:

我有一个 html iframe,其中仅包含一个嵌入的 youtube 视频。当用户单击视频/iframe 但不起作用时,我正在尝试执行操作。这是代码:

html:

<iframe id="myVideo" autoplay="true" src="https://www.youtube.com/embed/pyvGEnmv1E0"></iframe>

jQuery:

$(function()
  //line in question:
  $('#myVideo').contents().find("body").click(function()
    //perform action here
  );
);

关于上面的“有问题的线路”,我也试过比较简单的-

$('#myVideo').click(function());

但这也失败了。非常感谢任何帮助。

安德鲁

【问题讨论】:

【参考方案1】:

如果您不需要点击事件来访问 iFrame,则可以使用叠加层,并在其上捕获点击事件。

像这样:

HTML:

<div id="myVideoWrapper">
    <iframe id="myVideo" autoplay="true" src="https://www.youtube.com/embed/pyvGEnmv1E0"></iframe>
    <div id="myVideoOverlay"></div>
</div>

CSS:

#myVideoWrapper 
    position:relative;


#myVideoOverlay 
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

JS:

$(function()
    $('#myVideoOverlay').click(function()
        alert('clicked');
    );
);

【讨论】:

嗨大卫,感谢您的快速回答,不幸的是,这根本没有解决问题。您的解决方案的完整代码在这里:www.samedaygrocerydelivery.net/test2.txt 并在这里实现:www.samedaygrocerydelivery.net/test2.php 您还需要添加 CSS - 这将使覆盖的 div 元素位于 iframe 元素的顶部。然后你应该看到点击事件被触发。但就像我说的那样,它会阻止点击事件通过 iframe,所以这对你来说可能不是一个好的解决方案。以下链接中描述了一个可能更适合您的技巧:***.com/questions/2381336/… 是的,您在上面提供的链接对我有用。谢谢大卫。 -安德鲁

以上是关于jQuery 点击 iframe 视频(youtube)的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 视频点击

jQuery 在页面加载时播放 iframe 嵌入的 YouTube 视频

在 IE 中使用 jQuery 删除 iframe 后,Youtube 音频仍在播放

为啥同位素会混淆点击 iFrame?

使用 jQuery 按钮播放 Wistia 视频

在 iFrame 中暂停 YouTube 视频