Stop YouTube video playing when div is closed (hidden) with Javascript

Question

I have a basic overlay where when a specific link is clicked content is displayed over the top of the page. This works fine but I've just added a YouTube video embed and realised when the overlay is closed the sound plays in the background. So I need to find a way to stop or pause the video. I'm inherited the code, here it is:

$('#size-guide a').click(function(e){
    e.stopPropagation(); e.preventDefault();
    $('.sizeguide-popup-container').addClass('reveal');
    $('html,body').addClass('noscroll');
    $("header.mainHeader").css("position", "absolute").css("z-index", "100");
});

$(document).on("click", ".sizeguide-popup-close", function() {
    $(".sizeguide-popup-container").removeClass('reveal');
    $('html,body').removeClass('noscroll');
    $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");
});

$('.sizeguide-popup-container').on('click', function(e) {
  if (e.target !== this)
    return;
  $('.sizeguide-popup-container').removeClass('reveal');
  $('html,body').removeClass('noscroll');
  $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");
});

I guess it's just the 2nd block I need to amend but what I've tried so far hasn't done the trick. The video is automatically wrapped in a rte__video-wrapper div to make it responsive. So I thought I could amend it to something like the following (after reading another thread):

$(document).on("click", ".sizeguide-popup-close", function() {
    $(".sizeguide-popup-container").removeClass('reveal');
    $('html,body').removeClass('noscroll');
    $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");
    $(".rte__video-wrapper iframe").attr('src','');
});

As that essentially just removes the videos link so when the overlay is reopened there's a big blank space. Anyone point me in the right direction?

score 0 · Answer 1 · answered Dec 15 '17 at 11:21

According to the iframe API, you can stop a youtube video using player.stopVideo().

player.stopVideo():Void Stops and cancels loading of the current video. This function should be reserved for rare situations when you know that the user will not be watching additional video in the player. If your intent is to pause the video, you should just call the pauseVideo function. If you want to change the video that the player is playing, you can call one of the queueing functions without calling stopVideo first.

You can also check this SO post for additional code reference.

Stop YouTube video playing when div is closed (hidden) with Javascript

1 Answers1