Stop and play Iframe video when lightbox closes

Question

I'm making a lightbox that is supposed to show a youtube video. The first problem that I encountered, was that my youtube video would still play when I closed the lightbox.

I then added: $('iframe').remove();

__

But then the iframe goes away offcourse , and only a blank box opens when i click the link activating the lightbox.

How do I make my iframe load again, after removing it?

Or, is there another way of making the video stop when I close down the lightbox?

My code is here:

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

I hope that one you can help me out! :) Thanks.

Btw. I have researched the forum and found similar topics, but not an answer I could use, yet.

score 1 · Answer 1 · answered Nov 10 '13 at 16:48

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


    }

score 1 · Answer 2 · answered Jul 21 '17 at 14:58

1

That function will stop your video, without delete video src

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

answered Jul 21 '17 at 14:58

Dumitru Boaghi

183
2
4

score 0 · Accepted Answer · edited May 23 '17 at 12:15

You could change the src attribute of the iframe with jQuery to nothing, and then reload it (if it doesn't reload by itself) with this:

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

(I got this from this link)

The only disadvantage is that the video will reload again when you open the lightbox for the second time, and that you need to change the function that opens the lightbox for the first time.

As a note, I reccomend you not to load the iframe until the lightbox is opened, meaning that the best you can do is to add the code with JavaScript when needed. It takes 0.000001 seconds more, don't-ya-worry. I use it in my website and provides a very fast loading (of the website, of course) and keeps the browser very light.

But another way (and I really love this one) is to trigger a space keypress on the iframe, hence stopping the video, so when it's opened again, you find it paused on the same instant. Something like:

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

But thanks to your link, this helped me out: $( '#iframe' ).attr( 'src', function ( i, val ) { return val; }); — , Apr 28 '13 at 19:22

Stop and play Iframe video when lightbox closes

3 Answers3

Linked