0

我正在制作一个应该显示 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>

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

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

4

3 回答 3

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


    }
于 2013-11-10T16:48:43.703 回答
1

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

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

于 2017-07-21T14:58:30.950 回答
0

您可以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);
    });
}

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

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

作为说明，我建议您在打开灯箱之前不要加载 iframe，这意味着您可以做的最好的事情就是在需要时使用 JavaScript 添加代码。多花 0.000001 秒，不用担心。我在我的网站中使用它并提供非常快速的加载（当然是网站的）并保持浏览器非常轻便。

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

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-28T18:53:01.667 回答