引导模态点击关闭或外部点击不停止youTube视频

Question

我正在工作的引导模式弹出播放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问题参考:

如何停止Youtube视频在Twitter上播放引导模型关闭

通过api和Jquery事件显示/隐藏模式时启动/停止youtube iframe

. .和

Answer 1

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

您可以将您的函数附加到此事件而不是click

$('#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", "");

这肯定会停止视频