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

的事件

您可以将函数附加到此事件而不是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", "");

这肯定会停止视频

点击关闭或外部点击不停止youTube视频的Bootstrap模式

1 个答案: