jQuery 点击 iframe 视频（youtube）

Posted 2023-05-09

【中文标题】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/…

是的，您在上面提供的链接对我有用。谢谢大卫。 -安德鲁