jQuery弹窗视频关闭后仍后台播放，如何停止播放并禁用自动播放？

实现逻辑 #

• 利用 Magnific Popup 自带的关闭回调清空 iframe 地址，即可终止视频后台播放
• 移除原 iframe 地址中的 autoplay=1 参数即可禁用自动播放，若需要弹窗打开时才触发自动播放可在打开回调中拼接参数

修改后 JS 代码 #

$(document).ready(function() {
  // 预存原始视频地址
  const videoSource = "https://www.youtube.com/embed/qN3OueBm9F4";
  $('#headerVideoLink').magnificPopup({
    type: 'inline',
    callbacks: {
      // 弹窗打开回调，按需控制是否自动播放
      open: function() {
        // 不需要自动播放就用这行
        $('#headerPopup iframe').attr('src', videoSource);
        // 需要弹窗打开自动播放就注释上面那行，用下面这行
        // $('#headerPopup iframe').attr('src', videoSource + '?autoplay=1');
      },
      // 弹窗关闭回调，清空iframe地址停止播放
      close: function() {
        $('#headerPopup iframe').attr('src', '');
      }
    }
  });
});

修改后 HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="headerPopup" class="mfp-hide">
  <iframe width="854" height="480" src="" frameborder="0" allow="autoplay" allowfullscreen></iframe>
</div>

CSS 代码无需改动，保持原有逻辑即可 #

#headerPopup {
  width: 75%;
  margin: 0 auto;
  position: relative;
  top: 80px;
}

#headerPopup iframe {
  width: 100%;
  margin: 0 auto;
}

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