这个问题挺常见的——你只是把Overlay设为display:none隐藏起来，但里面的iframe并没有停止工作，视频自然会在后台继续播放。咱们可以通过修改你的show和hide函数，在关闭时主动处理iframe来解决这个问题。

方案：重置iframe的src（简单高效） #

核心思路是：关闭Overlay时清空iframe的src（让视频停止加载/播放），打开Overlay时再恢复原来的src，这样既保证视频停止，下次打开也能正常播放。

修改你的脚本部分如下：

$ = function(id) { return document.getElementById(id); }

var show = function(id) {
  var overlay = $(id);
  overlay.style.display = 'block';
  // 找到Overlay里的iframe
  var iframe = overlay.querySelector('iframe');
  // 如果之前保存过原始src，就恢复它
  if (iframe && iframe.dataset.src) {
    iframe.src = iframe.dataset.src;
  }
}

var hide = function(id) {
  var overlay = $(id);
  overlay.style.display = 'none';
  var iframe = overlay.querySelector('iframe');
  if (iframe) {
    // 先把原始src存在data属性里
    iframe.dataset.src = iframe.src;
    // 清空src，让视频停止
    iframe.src = '';
  }
}

为什么这个方法有效？ #

当你把iframe的src设为空时，浏览器会终止这个iframe的加载进程，里面的YouTube视频自然就停止播放了。而打开Overlay时恢复原始src，视频会重新加载并可以正常播放。

如果不想每次打开都重新加载视频（比如想记住播放进度），可以考虑使用YouTube Iframe API来直接控制视频的暂停/播放，但这个需要额外引入API脚本，步骤会复杂一些。对于大多数简单场景，上面的方法足够好用了。

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