Twitter Bootstrap Modal停止Youtube视频 [英] Twitter Bootstrap Modal stop Youtube video

问题描述

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

I'm very new to javascript and trying to use Twitter bootstrap to get a good looking website up and running quickly. I know this has something to do with jquery, but I'm not sure how to stop my video when I push the close button or the close icon.

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

Can someone explain how I can get my video to stop playing because even when I close the window, I can still hear it in the background.

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

推荐答案

有一个很好的正确方法 - 请参阅这篇文章的批准答案中的评论。

There is a nice proper way of doing this - see the comments in the approved answer to this post.

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

Couldn't get that working first time round myself though, and was in a rush, so I did a rather horrible hacky bit of code which does the trick.

此片段刷新嵌入iframe的src，导致其重新加载：

This snippet 'refreshes' the src of the embed iframe, causing it to reload:

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

这篇关于Twitter Bootstrap Modal停止Youtube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！