Bootstrap 模式关闭时 Youtube 视频仍在后台播放

Question

我正在 bootstrap 模式中播放嵌入的 YouTube 视频，当我关闭仍在后台播放的模式视频时。请帮助我

 <!-- Button trigger modal -->
    <button type="button" class="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#vid1" id="pbtn">
       <i class="fas fa-play" style="color: #ebaf02;font-size: 24px;"></i>
      </button>

<!-- Modal -->
  <div class="modal fade"  id="vid1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          
            <iframe id="video101" src="https://www.youtube.com/embed/il_t1WVLNxk"  width="760" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
           
        </div>
      </div>
    </div>
  </div>

<script>
 var myModal101 = document.getElementById('vid1')
 var myInput101 = document.getElementById('video101')
 
 myModal101.addEventListener('hide.bs.modal', function () {
   myInput101.get(0).stopVideo();
 })
</script>

Answer 1

这对你有用。

$('#vid1').on('hide.bs.modal', function(){
    $('#video101').attr('src', $('#video101').attr('src'));
  });

Working Fiddle

Bootstrap 模式关闭时 Youtube 视频仍在后台播放

Youtube Video Still Playing in background When Bootstrap Modal Closes

html

jquery

bootstrap-5