Stop YouTube video playing when overlay is closed

[grimski]

I have a simple overlay which works fine but I’ve just added a YouTube embed to it and when you close the overlay, the video continues to play in the background. I’m hoping someone has an idea to stop this happen! The video pausing would be ideal but jumping back to the start is ok if that’s too complicated.

The (inherited) code looks like this:

$('#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’ve tried amending the 2nd block to this:

$(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').find('iframe').attr('src','');
});

Which certainly stops the video from playing but obviously it completely removes the videos URL so when you relaunch the overlay there’s a big empty space where the video should be – any ideas?

[bclovis]

If your following the youtube API for embeds, you need to fire off player.stopVideo(); on the overlay close event.

[grimski]

The embed is just grabbed off the video page. So it’s just something like this…

EDIT Had to remove iframe YouTube embed as it won’t show the code here!

Thought it best to keep it that way as a user will need to add videos to content areas in future.

[bclovis]

$(‘#playerID’).get(0).stopVideo(); would work in that case, but if there will be several different videos, a way to get the proper ID would be needed.

[grimski]

So would something like the following be ok or does it need to be more specific (ID) than that?

$(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').get(0).stopVideo();
});

Don’t have access at home so thought I’d ask. Trying to get access now!

[Melisa]

Thank you for this post it helped me too.

[Shikkediel]

From a quick search, it looks like this is the most recent approach (stopVideo might be deprecated):

https://codepen.io/briangelhaus/pen/meeLRO?editors=1010

Edit – hmm, should still work. Seeing some conflicting messages.

https://developers.google.com/youtube/iframe_api_reference

[grimski]

Yeah that’s what I found when I did a Google too. I couldn’t find a solution that worked really. I tried the code I put above but that didn’t seem to do anything.

[bclovis]

Yes sorry, lucky for me for the most part I haven’t had to deal with youtube videos in a while, but here is a quick one using the API:

https://codepen.io/bwclovis/pen/WdbWwd

The idea is to have the video ID in the button that gets dynamically loaded when the button is clicked, so you can have multiple buttons with the multiple IDs. There would have to be an each loop there but, this should get you in the right direction.

[namphan1998]

Thank you so much for the replies.

It really helps me.

[grimski]

Thanks @bclovis, I guess I’ll just add that in addition to the script I posted rather than include it within it. And swap out the relevant classes for the trigger (btn) and the overlay container. I’ll see if swapping stopVideo(); for pauseVideo(); works also.

[Author]

Posts