jQuery 点击 iframe 视频（youtube）

Question

我有一个 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(){});

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

安德鲁

Answer 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');
    });
});