Bootstrap 模式关闭时 YouTube 视频仍在播放

YouTube

最近，有用户报告说他们在使用 Bootstrap 模式关闭时，YouTube 视频仍在继续播放。这个问题引起了一些困扰，因为关闭模态框应该停止视频的播放。在本文中，我们将探讨这个问题的原因，并提供一种解决方案来确保视频在关闭时能够停止播放。

html
<div class="modal" id="vIDEOModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">YouTube 视频</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="player"></div>
      </div>
    </div>
  </div>
</div>
<script>
  // 在模态框关闭时停止视频播放
  $('#vIDEOModal').on('hidden.bs.modal', function (e) {
    var player = document.getElementById('player');
    player.contentWindow.postMessage('{"event":"command","func":"stopVIDEO","args":""}', '*');
  });
</script>