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

问题描述

我正在创建一个带有引导程序的网站，可以在这里找到 - http://www.branchingouteurope.com/digital-火花测试/

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

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

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

</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 class="modal-body"><iframe width="100%" height="100%" src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0" frameborder="0" allowfullscreen></iframe>

`

解决方案

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

编辑 1

Chrome 转载，Modal关闭后视频确实还在播放.

试试这些已经回答的问题

使用 jquery 停止 YouTube 视频?

Twitter Bootstrap Modal 停止 Youtube 视频

最好的方法似乎是使用 YouTube API 来停止视频.使用此方法的答案可在上述问题中找到.

编辑 2

此解决方案似乎有效.

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

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

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

<iframe src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0&enablejsapi=1" allowfullscreen="" width="100%" frameborder="0" height="100%"><<;/iframe>

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

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>

`

解决方案

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.

EDIT 1

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

Try these already answered questions

Stop a youtube video with jquery?

Twitter Bootstrap Modal stop Youtube video

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.

EDIT 2

This solution seems to be working.

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.

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>

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 Modal 关闭时，YouTube 视频仍在播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！