Tutorial

How To: Stop a YouTube Video from Playing when Closing a Lightbox Modal

If you’ve ever had a YouTube video continue to play after closing the lightbox it was displayed in, you know it can be a very annoying bug to fix. The below code snippet will fix this issue. This method applies to the facebox script but can easily be applied to just about any lightbox modal that has an event to attach to when closing the modal.

// We're binding to the 'afterClose' event that facebox
// fires when closing a lightbox instance
jQuery(document).bind('afterClose.facebox', function() {
  // target iframes with src attribute containing 'youtube'
  // (within the facebox-generated .popup wrapper).
  var vid = jQuery('.popup iframe[src*="youtube"]');
  // if such an element exists
  if ( vid.length > 0 ){
    // get iframe's src attribute and cache it to a variable
    var src = vid.attr('src');
    // empty the iframe's src attribute
    // (this will kill the video playing)
    vid.attr('src', '');
    // and restore the iframe src url, ready to be played
    // again when the lightbox is displayed
    vid.attr('src', src);
  }
});

11 thoughts on “How To: Stop a YouTube Video from Playing when Closing a Lightbox Modal

  1. Hi, I’ve tried your solution and it worked. I’m using it to close video from Bootstrap 3 Modal’s. The thing is that I have several modals on the same page, and it seems to work just on 1. I have no idea how to add more modals to the script.

    Here’s what I have so far:

    jQuery(document).bind('hidden.bs.modal', function() {
    var vid = jQuery('#portfolioModal1 iframe[src*="youtube"]');
    if ( vid.length > 0 ){
    var src = vid.attr('src');
    vid.attr('src', '');
    vid.attr('src', src);
    }
    });

    Thanks in advance for any help on this.

    1. Miguel, it’s because you’re targeting a single id, #portfolioModal1. If you notice in the snippet in the post, it’s using a class, so it would apply to any modal w/ video. May want to see if bootstrap uses a consistent class for those modals.

  2. Hi there, sorry but after hours of trying, I have to admit this is beyond my strengh !
    I have a few modals on my website, containing each one iframe (either vimeo or youtube). I would like them to stop playing when I leave the modal… I applied about every script i found on web without having anything working for now…

    Here is how each modal is triggered :

    And here is how they are basicly composed :

    // FIRST WAY TO CLOSE IT

    Fermer // SECOND WAY TO CLOSE IT

    As you may notice, there are two ways this modal can be closed I enlighted.

    Then, I wrote the below code between in the head of my html document…
    jQuery(document).ready(function() {
    $(‘#modalID’).on(‘hidden’, function () {
    $iframe = $(this).find( “iframe” );
    $iframe.attr(“src”, $iframe.attr(“src”));
    });

    But nothing never happens… some help would be greatly appreciated !!!

Have a comment?

Your email address will not be published. Required fields are marked *