当Bootstrap模式关闭时,Youtube视频仍在播放

Question

我正在创建一个带有bootstrap的网站,可以在这里找到 - http://www.branchingouteurope.com/digital-spark-testing/

如果选择视频图像,您将看到一个模态窗口,打开一个YouTube视频.我遇到的问题是当模态窗口关闭时,视频会继续播放.我希望在模态窗口关闭时停止播放此视频.

我看过网上看了很多解决方案,但似乎都没有.这是标记......

<span class="main_video">
<div data-toggle="modal" data-target="#myModal" style="cursor:pointer">
<img src="img/master/video.fw.png" height="81%" width="60%" alt="Digital Spark Video"/>
</div>
</span>

<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  </div>
  <div class="modal-body">
  <iframe width="100%" height="100%" src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

`

Answer 1

在FireFox 26.0中进行测试,按预期工作.当我关闭Modal或点击它以外然后重新打开它时 - 视频重新开始和停止.

编辑1

在Modal关闭后,视频确实在Chrome中重播.

试试这些已经回答的问题

用jquery停止youtube视频？

Twitter Bootstrap Modal停止Youtube视频

最好的方法似乎是使用YouTube API来停止视频.上述问题中提供了使用此方法的答案.

编辑2

这个解决方案似乎有效.

首先,从这篇文章中获取JS:YouTube iframe API:如何控制已经在HTML中的iframe播放器？ 并将其包含在页面上.

加载上述脚本后(在结束体标记之前)添加此JS

<script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function () {
        callPlayer('yt-player', 'stopVideo');
    });
</script>

您还需要向包含iframe的div添加ID,如下所示

<div class="modal-body" id="yt-player">
    <iframe src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0&enablejsapi=1" allowfullscreen="" width="100%" frameborder="0" height="100%"></iframe>
</div>

Answer 2

根据dizarter的版本和他链接到的解决方案之一,这里的答案要轻一点.

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

Answer 3

看看我的代码,我不需要使用任何API

// on preview show iframe
$('#myModalPrev').on('show.bs.modal', function (e) {
  var idVideo = $(e.relatedTarget).data('id');
  $('#myModalPrev .modal-body').html('<iframe width="100%" height="400px" src="https://www.youtube.com/embed/' + idVideo + '?autoplay=true" frameborder="0" allowfullscreen></iframe>');
});
//on close remove
$('#myModalPrev').on('hidden.bs.modal', function () {
   $('#myModalPrev .modal-body').empty();
});

HTML

<a href="#" data-id="5Kp_1Vq6pRg" data-target="#myModalPrev" data-toggle="modal">Abrir Modal</a>
    <div class="modal fade" id="myModalPrev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="myModalLabel" class="semi-bold">Visualizar <strong>Marca</strong>.</h4>
                    </div>
                    <hr>
                    <div class="modal-body">
                        Modal Content
                    </div>
                    <hr>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-primary"><i class="fa fa-times"></i> Fechar</button>               
                    </div>
                </div>
            </div>
        </div>

演示: https ://jsfiddle.net/o0ftdvs1/

Answer 4

此解决方案适用于 Boostrap 4。它支持同一页面上的许多不同模态，而无需指定模态 ID。这是演示http://jsfiddle.net/hxtpoe/6k09f4x2/

$('.modal').on('hide.bs.modal', function() {
     var memory = $(this).html();
     $(this).html(memory);
});

Answer 5

方式更简单更容易受到 @\xc5\x81ukasz 的启发，通过/sf/answers/3662084471/进行现场演示 @ https://forwardemail.net。

\n

//\n// any modals with embedded <iframe> we can assume need reset\n// </sf/answers/3662084471/>\n//\n$(\'body\').on(\'hide.bs.modal\', \'.modal\', function() {\n  const $modal = $(this);\n  // return early if there were no embedded YouTube videos\n  if ($modal.find(\'iframe\').length === 0) return;\n  const html = $modal.html();\n  $modal.html(html);\n});\n

\n

Answer 6

这是 CloudKiller 答案的替代方案，它实际上适用于自动播放，只需更改.attr为.removeAttr：

jQuery('#myModal iframe').removeAttr("src", jQuery("#myModal iframe").removeAttr("src"));

但更缩小/简化的版本是简单地用src空值替换：

$('#myModal iframe').attr('src', '');

因此，您需要为此添加的唯一代码是：

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