Home » Jquery » javascript – Stopping a vimeo video on close of a modal, when multiple videos are in one page

javascript – Stopping a vimeo video on close of a modal, when multiple videos are in one page

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have multiple pop ups on one page. each pop up not coded with bootstrap, has a bootstrap carousel inside it. within those bootstrap carousels there may or may not be a vimeo video.

The issue were having is stopping the video from playing on dismiss of the popup or pressing the left and right buttons because with there being multiple videos in different carousels the script below copies the video from the first src it finds and replaces every video with that src.

I’ve tried using closest() and find() and also tried both of those on the script within the click function to say (this).closest($frame) but this doesn’t work either.

Any help would be greatly appreciated.

function stopVideo() {
 var $frame = $('iframe#nofocusvideo');

 // saves the current iframe source
var vidsrc = $frame.attr('src');

// sets the source to nothing, stopping the video
$frame.attr('src', '');

// sets it back to the correct link so that it reloads immediately on the next window open
$frame.attr('src', vidsrc);
}

$(".carousel-control-prev").click(function(){
stopVideo();
});


$(".carousel-control-next").click(function(){
stopVideo();
});

$(".fa-times").click(function(){
stopVideo();
});
How to&Answer:

var $frame = $(‘.carousel-item.active’).find(‘iframe’); fixed this issue