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);
}
});
Much appreciated, thanks for the tip!
Thanks!
muchas gracias senor
Just saved us a lot of time and frustration. Thanks!
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.
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.Hi,
I am in trouble with video in modal, please check and guide me, i checked everything on google, but no success.
i want to pause videos on close modal.
http://104.130.17.11:7000/what-we-do/weddings/weddings/
Hi sorry about the question but where i put this text thanks
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 !!!