灯箱关闭时停止并播放iframe视频 [英] Stop and play Iframe video when lightbox closes
问题描述
我正在制作一个应该显示youtube视频的灯箱. 我遇到的第一个问题是，当我关闭灯箱时，我的youtube视频仍然可以播放.
I'm making a lightbox that is supposed to show a youtube video. The first problem that I encountered, was that my youtube video would still play when I closed the lightbox.
然后我添加: $('iframe').remove();
__
但是随后iframe偏离了航路，当我单击激活灯箱的链接时，只有一个空白框打开.
But then the iframe goes away offcourse , and only a blank box opens when i click the link activating the lightbox.
删除iframe后，如何重新加载iframe?
How do I make my iframe load again, after removing it?
或者，当我关闭灯箱时，还有另一种使视频停止播放的方法吗?
Or, is there another way of making the video stop when I close down the lightbox?
我的代码在这里:
<html>
<head>
<title>Youtube Lightbox</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">
body
{
font-family: Arial;
}
.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}
.box
{
position:absolute;
top:20%;
left:30%;
width:500px;
height:300px;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.lightbox').click(function(){
$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});
$('.backdrop').click(function(){
close_box();
});
});
function close_box()
{
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
$('iframe').remove();
});
}
</script>
</head>
<body>
<h1>This is a webpage...</h1>
<a href="#" class="lightbox">Open Youtube lightbox</a>
<div class="backdrop"></div>
<div class="box"><iframe width="500" height="300" src="http://www.youtube.com/embed/some/video" frameborder="0" allowfullscreen></iframe></div>
</body>
</html>
我希望你能帮助我！ :) 谢谢.
I hope that one you can help me out! :) Thanks.
顺便说一句.我已经研究了该论坛并找到了类似的主题，但是还没有我可以使用的答案.
Btw. I have researched the forum and found similar topics, but not an answer I could use, yet.
推荐答案
您可以使用jQuery将iframe的src属性更改为无，然后使用以下方法重新加载它(如果它本身未重新加载):
You could change the src attribute of the iframe with jQuery to nothing, and then reload it (if it doesn't reload by itself) with this:
function close_box() {
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
$('#box iframe').prop('src', '#');
document.getElementById(FrameID).contentDocument.location.reload(true);
});
}
(我是从此链接获得的)
唯一的缺点是，当您第二次打开灯箱时，视频将再次重新加载，并且您需要更改首次打开灯箱的功能.
The only disadvantage is that the video will reload again when you open the lightbox for the second time, and that you need to change the function that opens the lightbox for the first time.
请注意，我建议您在打开灯箱之前不要加载iframe，这意味着您最好的做法是在需要时使用JavaScript添加代码.还需要0.000001秒，请不要担心. 我在我的网站上使用它，并且提供了非常快的加载速度(当然是网站的加载)，并且浏览器非常轻巧.
As a note, I reccomend you not to load the iframe until the lightbox is opened, meaning that the best you can do is to add the code with JavaScript when needed. It takes 0.000001 seconds more, don't-ya-worry. I use it in my website and provides a very fast loading (of the website, of course) and keeps the browser very light.
但是另一种方法(我真的很喜欢)是在iframe上触发space keypress，从而停止视频，因此当再次打开视频时，您会发现它在同一瞬间暂停了.
像这样:
But another way (and I really love this one) is to trigger a space keypress on the iframe, hence stopping the video, so when it's opened again, you find it paused on the same instant.
Something like:
function close_box() {
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
var e = jQuery.Event("keyup");
e.which = 23; // The spacebar key code is 23
$('#box iframe').trigger(e);
});
}
这篇关于灯箱关闭时停止并播放iframe视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
