Twitter Bootstrap Modal 停止 Youtube 视频
[英] Twitter Bootstrap Modal stop Youtube video
本文介绍了Twitter Bootstrap Modal 停止 Youtube 视频的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对 javascript 非常陌生,并试图使用 Twitter 引导程序来快速启动并运行一个漂亮的网站.我知道这与 jquery 有关系,但是当我按下关闭按钮或关闭图标时,我不确定如何停止我的视频.
谁能解释一下如何让我的视频停止播放,因为即使我关闭窗口,我仍然可以在后台听到它.
<a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a><!-- 模态--><div id="myModal" class="modal hidefade" 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">我是标题</h3>
<div class="modal-body"><p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>
<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
解决方案
有一个很好的正确方法 - 请参阅已批准的 这篇文章.
虽然我自己第一次无法做到这一点,而且很匆忙,所以我做了一个相当可怕的hacky代码来解决这个问题.
此代码段刷新"了嵌入 iframe 的 src,使其重新加载:
jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));});
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.
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.
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屋!