停止和播放的iFrame视频时关闭灯箱(Stop and play Iframe video whe

我在做这是为了显示YouTube视频灯箱。我遇到的第一个问题，是我的YouTube视频仍然会玩的时候我关上了灯箱。

然后我说：$（ 'IFRAME'）删除（）。

但随后的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>

我希望有你能帮助我！：）谢谢。

顺便说一句。我已经研究了论坛，并发现了类似的话题，但不是一个答案，我可以使用，但。

Answer 1:

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

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

（我得到这个从这个链接）

唯一的缺点是，当你打开收藏夹第二次，视频将重新加载，而且你需要更改打开了第一次收藏夹功能。

作为一个说明，我建议你，直到灯箱被打开，这意味着你可以做的最好的是在需要的时候使用JavaScript代码添加不加载的iframe。 它需要0.000001秒更多，鸵鸟政策雅担心。 我用它在我的网站，并提供了一个非常快速加载（网站，当然），并保持浏览器很轻。

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

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

Answer 2:

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


    }

Answer 3:

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

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

文章来源: Stop and play Iframe video when lightbox closes