当灯箱关闭时停止并播放Iframe视频

我正在制作应该显示YouTube视频的灯箱。我遇到的第一个问题是，当我关闭灯箱时，我的YouTube视频仍会播放。当灯箱关闭时停止并播放Iframe视频

然后我添加了：$（'iframe'）。remove（）;

但随后的iframe消失offcourse，当我点击链接激活灯箱只打开一个空白框。

如何使iframe在删除后再次加载？

或者，当我关闭灯箱时，还有另一种制作视频的方法吗？

我的代码是在这里：

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

我希望有你能帮助我！ :) 谢谢。

Btw。我已经研究过这个论坛，发现了类似的话题，但还没有答案我可以使用。

来源

2013-04-28 Adnaves

你可以用这种改变与jQuery的iframe不了了之的src属性，然后重新装入（如果它本身不重装）：

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); 
    }); 
}

（我得到这个从this link）

唯一的缺点是，当您第二次打开灯箱时，视频会重新加载，并且您需要更改第一次打开灯箱的功能。

请注意，我建议您不要加载iframe，直到打开lightbox，这意味着您可以做的最好的做法是在需要时使用JavaScript添加代码。它需要0.000001秒多，不要担心。 I use it in my website，并提供非常快速的加载（当然，网站），并保持浏览器非常轻。

但另一种方式（我真的很喜欢这个）是对IFRAME触发space keypress，因此停止视频，所以当它再次打开，你会发现它暂停在同一时刻。喜欢的东西：

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); 
    }); 
}

来源

2013-04-28 18:53:01 Nico

但由于你的链接，帮我出：$（“#iframe '）.attr（'src'，function（i，val）{return val;}）; – Adnaves 2013-04-28 19:22:40

function close_box() 
    { 
     $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ 
      $('.backdrop, .box').css('display', 'none'); 
      $('iframe').remove(); 
      var video = $('iframe').attr("src"); 
      $('iframe').attr("src",""); 
    $('iframe').attr("src",video); 
     }); 


    }

来源

2013-11-10 16:48:43 hiddenpearls

该函数将停止播放视频，而无需删除视频SRC

function unsetVideoLink(id){ 
 
    var src = $(id).attr('src'); 
 
    $(id).attr('src',''); 
 
    $(id).attr('src',src); 
 
}

来源

2017-07-21 14:58:30

当灯箱关闭时停止并播放Iframe视频

回答

相关问题