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中复制的视频确实在模式关闭后仍能继续播放.

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

尝试这些已经回答的问题

Try these already answered questions

用jquery停止youtube视频吗?

Twitter Bootstrap Modal Stop 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.

此解决方案似乎有效.

首先，从此信息中获取JS:

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.

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

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