Question

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

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

__

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

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

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

顺便说一下。我研究过这个论坛，发现了类似的主题，但还没有我能用的答案。

Answer 1

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

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

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

3 个答案: