为何触发iframe YouTube视频播放需双击？如何实现单击播放？

通过<a>标签触发iframe中的YouTube视频播放，当前功能可正常运行，但需点击图片两次才能启动视频播放，希望修改为单击即可播放，询问是否是iframe焦点问题导致。

原代码如下：

<center><a href="javascript:void(0)" class="addto" id="playvideo" target="_self" onclick="someFunction2()">
    <img src="www.pngegg.com/pngimages/299/1011/png-clipart-moringa-leaf.png" width="300">
      
</a></center>

<script>
 function someFunction2(){

 $("#playvideo").click(function(){
 $("#widget2")[0].src = "https://www.youtube.com/embed/JtdGWMH28ns?autoplay=1";
    });
 }
</script>

问题原因 #

这不是iframe焦点问题，核心是事件绑定逻辑错误：

• 第一次点击<a>标签时，执行someFunction2()，这个函数内部才给#playvideo元素绑定click事件，此时仅完成事件绑定，并未执行修改iframe src的操作；
• 第二次点击时，才会触发刚绑定的click事件，修改iframe的src实现视频播放。

解决方案 #

提供两种可行修改方式：

方式1：直接在触发函数中执行播放逻辑 #

去掉函数内部的事件绑定，直接修改iframe的src：

<center>
  <a href="javascript:void(0)" class="addto" id="playvideo" target="_self" onclick="someFunction2()">
    <img src="www.pngegg.com/pngimages/299/1011/png-clipart-moringa-leaf.png" width="300">
  </a>
</center>

<script>
function someFunction2(){
  // 直接修改iframe的src，触发自动播放
  $("#widget2")[0].src = "https://www.youtube.com/embed/JtdGWMH28ns?autoplay=1";
}
</script>

方式2：页面加载完成后绑定事件（推荐） #

去掉<a>标签的onclick属性，在页面DOM加载完成后统一绑定click事件，更符合前端代码规范：

<center>
  <a href="javascript:void(0)" class="addto" id="playvideo" target="_self">
    <img src="www.pngegg.com/pngimages/299/1011/png-clipart-moringa-leaf.png" width="300">
  </a>
</center>

<script>
// 确保DOM加载完成后再绑定事件
$(document).ready(function(){
  $("#playvideo").click(function(){
    $("#widget2")[0].src = "https://www.youtube.com/embed/JtdGWMH28ns?autoplay=1";
  });
});
</script>

注意事项 #

请确保页面中存在id为widget2的iframe元素，否则代码无法找到目标元素执行播放操作。

内容的提问来源于stack exchange，提问作者Toni