CODEWITHSUNDEEP
javascriptjqueryhtmlvideoyoutube
user4187763
user4187763

Reputation:

Stop Playing Youtube Video When Lightbox Is Closed

I'm creating a lightbox to play videos from youtube without a plugin, so far things are going well, but now I'm having a issue, I don't know how to make the youtube video stop playing when the Lightbox is closed, here's the code

//triggering or close the lightbox
$( '#overlay, #close').on('click', function(event) {
    $("#lightbox, #overlay").hide();
});

$( '#show').on('click', function(event) {
    $("#lightbox, #overlay").show();
});


// This loads the iframe only on click on the Lightbox Button
var iframes = $('iframe');

$('.show').click(function() {
    iframes.attr('src', function() {
        return $(this).data('src');
    });
});

iframes.each(function() {
    var src = $(this).attr('src');
    $(this).data('src', src).attr('src', '');
});

Also I don't know how to make play only the vídeo from the button I clicked, because right now when I click on a Show lightbox button it's playing all the vídeos from the page and not just the current one from the button I clicked.

Here's the Jsfiddle exemple. HTML is included on it

Upvotes: 0

Views: 3711

Answers (2)

Irina
Irina

Reputation: 111

An easier way would be 

$(player-selector).on("click", function()
{
   $(this).html("").hide();
}

Isn't it correct?

Upvotes: 0

Ryan H.
Ryan H.

Reputation: 2593

Try taking a look at the YouTube Player API Reference

Below I incorporated the example code from the API reference into a modified version of your JSFiddle example:

<html>
  <head>

    <style>
        /* CSS styles removed for brevity */
    </style>

  </head>

  <body>
    <div class="left">
    <button class="show">Show lightbox</button>

    <!-- LIGHTBOX CODE BEGIN -->
    <div id="lightbox" class="lightbox" style="display:none">
        <div class="white_content">
            <a href="javascript:;" id="close">Close</a>
            <p>Click anywhere to close the lightbox.</p>
            <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
            <div id="player"></div>
        </div>
    </div>

    <div id="overlay" style="display:none">
      <!-- LIGHTBOX CODE END -->
    </div>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
        $( '#overlay, #close').on('click', function(event) {
            $("#lightbox, #overlay").hide();
            player.stopVideo();
        });

        $( '.show').on('click', function(event) {
            $("#lightbox, #overlay").show();    
            player.seekTo(0, false);
            player.playVideo();
        });

        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }

        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) { }

        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        function onPlayerStateChange(event) { }
    </script>
  </body>
</html>

Utilizing the API the above code stops the video when the lightbox is closed.

Note: I removed the second button to keep the code sample simple.

Upvotes: 1

Related Questions