javascript - 当用户点击播放视频的帧时如何调用javascript函数

Question

<script>
    function myFunction() {
        alert("hello");
    }
</script> 

<iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc" onclick="myFunction()"></iframe>

.请任何人。帮助

Answer 1

一种解决方案是覆盖一个透明的 div 并向该 div 添加一个点击事件。但是您将无法点击 iframe。

如果你想让视频可以点击，添加这个

document.getElementById("overlay").style.display = "none";

工作片段:

function myFunction() {
  alert("Now you can play the video");
  document.getElementById("overlay").style.display = "none";  //makes the iframe clickable 
}

.container {
  position:relative;
}
.overlay {
  top:0;
  left:0;
  width:100%;
  height:100%;
  position:absolute;
}

<div class="container">
  <iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc"></iframe>
  <div class="overlay" id="overlay" onclick="myFunction()"></div>
</div>