Bootstrap 模式关闭时 Youtube 视频仍在播放 [英] Youtube Video Still Playing When Bootstrap Modal Closes

问题描述

我正在创建一个带有引导程序的网站，可以在此处找到 - http://www.branchingouteurope.com/digital-spark-testing/

I am creating a website with bootstrap that can be found here - http://www.branchingouteurope.com/digital-spark-testing/

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

If you select the video image you'll see a modal window open a youtube video. The problem I have is that when the modal window is closed the video keeps playing. I want this video to stop when the modal window is closed.

我在网上查看并阅读了许多解决方案，但似乎没有一个有效.这是标记...

I've looked online and read many solutions however none seem to work. Here is the mark up...

<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>

`

推荐答案

在 FireFox 26.0 中测试，按预期工作.当我关闭 Modal 或在其外部单击然后重新打开时 - 视频将重新开始并停止.

Testing here in FireFox 26.0, works as expected. When I either close the Modal or click outside of it and then re-open it - video is back to start and stopped.

在Chrome中重现，Modal关闭后视频确实一直在播放.

Reproduced in Chrome, the video indeed keeps playing after the Modal is closed.

试试这些已经回答的问题

Try these already answered questions

使用 jquery 停止 youtube 视频?

Twitter Bootstrap Modal 停止 Youtube 视频

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

The best way seems to be to use YouTube API to stop the video. Answer that uses this method is available in the questions above.

这个解决方案似乎奏效了.

This solution seems to be working.

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

First, get the JS from this post: YouTube iframe API: how do I control a iframe player that's already in the HTML? and include it on the page.

在你加载了上面的脚本之后添加这个 JS(就在结束 body 标记之前)

Add this JS after you have loaded the above script (just before the closing body tag)

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

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

You will also need to add an ID to the div containing the iframe, as below

<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>

这篇关于Bootstrap 模式关闭时 Youtube 视频仍在播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！