自定义懒加载嵌入YouTube视频移动端需两次点击播放问题求助

我帮你排查了代码，发现两个核心问题导致移动端需要两次点击才能播放视频：

问题分析 #

• 移动端浏览器自动播放限制：当前主流移动端浏览器（如Chrome、Safari）有严格的自动播放规则——非静音视频无法通过用户交互触发自动播放。你的原代码仅添加了autoplay=1参数，但未开启静音，导致视频加载后无法自动启动，只能显示YouTube默认播放按钮。
• 闭包变量引用bug：图片加载的立即执行函数中，youtube[i]的引用因循环异步特性可能出现异常，虽然这不是移动端点击问题的直接原因，但会导致图片无法正确插入到对应容器中。

修复方案 #

针对以上问题，我修改了代码的关键部分，确保移动端单次点击即可播放：

修改后的完整代码 #

HTML

<div class="youtube" data-embed="AqcjdkPMPJA">
  <!-- 自定义播放按钮 -->
  <div class="play-button"></div>
</div>

CSS

.youtube {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}

.youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}

.youtube .play-button {
  width: 90px;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}

.youtube .play-button:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
  cursor: pointer;
}

.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
  position: absolute;
}

.youtube .play-button,
.youtube .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

JavaScript

(function() {
  var youtube = document.querySelectorAll(".youtube");
  
  for (var i = 0; i < youtube.length; i++) {
    // 用立即执行函数捕获当前循环的索引，避免闭包引用错误
    (function(index) {
      var source = "https://img.youtube.com/vi/" + youtube[index].dataset.embed + "/sddefault.jpg";
      var image = new Image();
      image.src = source;
      image.addEventListener("load", function() {
        youtube[index].appendChild(image);
      });
      
      // 同时监听click和touchstart事件，确保移动端触摸触发
      youtube[index].addEventListener("click", handlePlayClick);
      youtube[index].addEventListener("touchstart", handlePlayClick);
      
      function handlePlayClick() {
        var iframe = document.createElement("iframe");
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "");
        // 添加mute=1满足移动端自动播放要求，playsinline=1让视频在页面内播放
        iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&controls=0&autoplay=1&mute=1&playsinline=1");
        
        this.innerHTML = "";
        this.appendChild(iframe);
        
        // 移除事件监听，避免重复点击创建多个iframe
        this.removeEventListener("click", handlePlayClick);
        this.removeEventListener("touchstart", handlePlayClick);
      }
    })(i);
  }
})();

关键修改说明 #

1. 添加静音与内联播放参数：在iframe的URL中加入&mute=1&playsinline=1，满足移动端浏览器的自动播放规则，同时让视频在页面内播放而非强制全屏。
2. 修复闭包变量问题：通过立即执行函数捕获循环索引index，确保图片加载时能正确插入到对应的YouTube容器中。
3. 适配移动端触摸事件：同时监听click和touchstart事件，确保移动端用户触摸自定义播放按钮时能触发播放逻辑。
4. 移除重复事件监听：播放逻辑执行后移除事件监听，避免用户重复点击创建多个iframe。

修改后，移动端点击一次自定义播放按钮即可启动视频（默认静音，用户可手动开启声音），和桌面端体验保持一致。

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