如何点击弹出框外部时暂停YouTube视频？编程新手求助

我懂你的烦恼——弹窗明明关了，后台却还能听到视频声音，确实挺闹心的。问题出在你当前的实现只是用CSS把弹窗隐藏了，但iframe里的YouTube视频并没有被暂停或停止，它还在DOM里悄悄运行着呢。咱们加一点JavaScript就能搞定这个问题，下面是具体的解决步骤：

方案1：监听锚点变化，重置视频源 #

因为你是通过锚点（#img1、#_）来控制弹窗显示隐藏的，所以可以监听浏览器的hashchange事件，当锚点切换回#_时（也就是弹窗关闭时），找到对应的iframe并重置它的src属性，这样视频就会立刻停止播放。

把这段代码放到页面的</body>标签之前就行：

// 监听浏览器锚点变化事件
window.addEventListener('hashchange', function() {
  // 当锚点变为#_，说明要关闭弹窗了
  if (window.location.hash === '#_') {
    // 定位弹窗里的视频iframe
    const videoIframe = document.querySelector('#videoModal iframe');
    if (videoIframe) {
      // 保存原始视频链接（可以去掉autoplay=1，避免下次打开自动播放，按需选择）
      const originalSrc = videoIframe.src.replace('&autoplay=1', '');
      // 重置iframe的src，视频会停止播放
      videoIframe.src = originalSrc;
    }
  }
});

方案2：给关闭按钮和弹窗背景绑定点击事件 #

你也可以直接给关闭按钮、弹窗背景区域添加点击事件，触发时主动停止视频：

// 获取关闭按钮和lightbox容器
const closeBtn = document.querySelector('#videoModal .close');
const lightbox = document.querySelector('#img1');

// 关闭按钮点击时停止视频
closeBtn.addEventListener('click', stopVideo);
// 点击弹窗背景（外部区域）时停止视频
lightbox.addEventListener('click', function(e) {
  // 确保点击的是背景本身，不是弹窗内容
  if (e.target === this) {
    stopVideo();
  }
});

// 封装停止视频的函数
function stopVideo() {
  const videoIframe = document.querySelector('#videoModal iframe');
  if (videoIframe) {
    const originalSrc = videoIframe.src;
    // 重置src让视频停止
    videoIframe.src = originalSrc;
  }
}

进阶优化：用YouTube API精准控制视频（可选） #

如果你想实现更细腻的控制（比如暂停而非重置视频，下次打开能从暂停处继续），可以在嵌入iframe时添加enablejsapi=1参数，启用YouTube的JavaScript API：

修改你的iframe代码：

<iframe width="870px" height="489px" src="https://www.youtube.com/embed/84V4AQIZMUg?rel=0&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>

然后把stopVideo函数改成这样：

function stopVideo() {
  const videoIframe = document.querySelector('#videoModal iframe');
  if (videoIframe) {
    // 向YouTube播放器发送暂停命令
    videoIframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
  }
}

这样做的好处是保留视频播放进度，用户体验会更流畅。你可以根据自己的需求选一种方案，第一种最贴合你当前用锚点控制的逻辑，实现起来也最简单~

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