html 在模态中打开YouTube视频，并在关闭模态时将其停止

Posted 2021-05-11

<!--- This is the video link --->
<a href="##"><img src="#videoItem.getImageUrl()#" data-link="#videoItem.getVideoLink()#" alt="#videoItem.getTitle()#"></a>

<!-- Video modal -->
<div class="modal videoModal" id="videoModal">
  <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove-sign"></span></button>
        </div>
        <div class="modal-body">
          <div class="embed-container"><iframe class="videoElement" src="" frameborder="0" allowfullscreen></iframe></div>
        </div>
      </div>
    </div>
</div>

<script>
  //Change video modal when click on image
  $('.videoResource ul li img').click(function(){
    var videoLink = $(this).attr('data-link');
    $('.videoElement').attr('src',videoLink);
    $('##videoModal').modal({show:true});
  });
  //Stop video when modal closes
  $('.videoModal').each(function(){
    $(this).on('hidden.bs.modal', function (e) {
        var videoObj = $(this).find('iframe');
        var videoSrc = $(this).find('iframe').attr('src');
        $(videoObj).attr('src','');
        $(videoObj).attr("src", videoSrc);
    });
  });
</script