单击关闭或外部单击时的引导模式不会停止 YouTube 视频答案

【问题标题】：Bootstrap modal on click of close or outside click not stopping youTube Videos单击关闭或外部单击时的引导模式不会停止 YouTube 视频
【发布时间】：2014-07-26 10:17:32
【问题描述】：

我正在使用引导模式弹出来播放 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

.. 还有更多

【问题讨论】：

标签： javascript jquery twitter-bootstrap video youtube

【解决方案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 设置为自身

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

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

这肯定会停止视频

【讨论】：