Twitter Bootstrap Modal停止Youtube视频

Question

我是javascript的新手,并尝试使用Twitter引导程序来获得一个好看的网站并快速运行.我知道这与jquery有关,但是当我按下关闭按钮或关闭图标时,我不确定如何停止我的视频.

有人可以解释我如何让我的视频停止播放,因为即使我关闭窗口,我仍然可以在后台听到它.

<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a>

<!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria>×</button>
      <h3 id="myModalLabel">I am the header</h3>
    </div>
    <div class="modal-body">
      <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>

Answer 1

我知道我迟了2年多,但从那以后,有些事情发生了变化,B3开箱即用的新方法就是这样:

$("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

与Bootstrap玩得开心!

Answer 2

有这样做的一个很好的有道-看到批准答案评论这篇文章.

虽然不能让自己第一次工作,并且匆忙,所以我做了一个相当可怕的hacky代码来完成这个伎俩.

此代码段"刷新"嵌入iframe的src,导致其重新加载:

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
        jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
});

Answer 3

如果有人仍然有问题,试试这个,它对我有用:

$(document).ready(function(){
    $('.modal').each(function(){
            var src = $(this).find('iframe').attr('src');

        $(this).on('click', function(){

            $(this).find('iframe').attr('src', '');
            $(this).find('iframe').attr('src', src);

        });
    });
});

Answer 4

这是我发现在模态窗口中播放视频然后停止播放的简单方法.

当显示模态时,使用.html将带有视频的iFrame加载到模态体中,然后在隐藏模态体时将其替换为空.

$('#myModal').on('show', function () { 
 $('div.modal-body').html('YouTube iFrame goes here');  
});
$('#myModal').on('hide', function () {
 $('div.modal-body').html('');
});

这是一个jsfiddle示例:

http://jsfiddle.net/WrrM3/87/

Answer 5

在这里,我概括了@ guillesalazar的答案.

这将重置任何bootstrap模式中的任何iFrame(当模态关闭时):

$(function(){
  $("body").on('hidden.bs.modal', function (e) {
    var $iframes = $(e.target).find("iframe");
    $iframes.each(function(index, iframe){
      $(iframe).attr("src", $(iframe).attr("src"));
    });
  });
});

将其添加到您的布局中并进行设置.

更新:为具有多个iFrame的模态修改了代码.

Answer 6

你应该首先清空iframe src,然后重新设置它.

所以我的工作答案是:

$('#myModal').on('hidden.bs.modal', function () {
    var src = $(this).find('iframe').attr('src');
    $(this).find('iframe').attr('src', '');
    $(this).find('iframe').attr('src', src);
});

2014年10月.对于Bootstrap 3.