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

【问题标题】：Stop and play Iframe video when lightbox closes灯箱关闭时停止并播放 Iframe 视频
【发布时间】：2013-04-22 09:22:08
【问题描述】：

我正在制作一个应该显示 youtube 视频的灯箱。我遇到的第一个问题是，当我关闭灯箱时，我的 youtube 视频仍然可以播放。

然后我添加了：$('iframe').remove();

但是随后 iframe 离开了，当我单击激活灯箱的链接时，只会打开一个空白框。

如何让我的 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>

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

顺便说一句。我研究了论坛并找到了类似的主题，但还没有我可以使用的答案。

【问题讨论】：

标签： jquery iframe youtube youtube-api lightbox

【解决方案1】：

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


    }

【讨论】：

【解决方案2】：

该功能将停止您的视频，而不删除视频 src

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

【讨论】：

【解决方案3】：

您可以使用 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，这意味着您可以做的最好的事情是在需要时使用 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);
    });
}

【讨论】：

但是感谢您的链接，这帮助了我： $( '#iframe' ).attr( 'src', function ( i, val ) { return val; });