javascript - 单击关闭或外部单击时的 Bootstrap 模式不会停止 youTube 视频

Question

我正在开发 Bootstrap 模式弹出窗口来播放 YouTube 视频，并且应该在单击“关闭”或“外部关闭”时停止它。

下面是我的代码。

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content" style="width: 682px;">
      <div class="modal-header" style="border:none;">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>  
             
      </div>
      <div class="modal-body">
      <iframe width="640" height="390" src="http://www.youtube.com/watch?v=8CdAfYwEGCI" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

我已经尝试了 StackOverflow 上类似问题中的以下脚本，但它们不起作用。

脚本:

$('.close').click(function () {
  $('#myModal2').hide();
  $('#myModal2 iframe').attr("src", jQuery("#myModal2 iframe").attr("src"));
});

提到的类似 Stackoverflow 问题:

How to stop a Youtube Video Playing on Twitter Bootstrap Model Close

Start/stop youtube iframe when modal is shown/hidden through the api and Jquery events

..以及更多

Answer 1

Bootstrap 有一个名为 hidden.bs.modal 的事件

您可以将函数附加到此事件，而不是点击

$('#myModal2').on('hidden.bs.modal', function(){
$('#myModal2').hide();
$('#myModal2 iframe').attr("src", jQuery("#myModal2 iframe").attr("src"));
});

另外， Bootstrap 应该自动隐藏其关闭按钮上的模式(这应该已经内置)

至于停止视频，看起来您正在将 iframe src 设置为自身

(不确定这是否会停止视频，如果会停止，您可以忽略我下面的评论，但如果不会，您可能需要将 src 设置为空白)

$('#myModal2 iframe').attr("src", "");

这肯定会停止视频