Give help. Get help.

  • # December 13, 2017 at 4:11 am

    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();
        $("header.mainHeader").css("position", "absolute").css("z-index", "100");
    $(document).on("click", ".sizeguide-popup-close", function() {
        $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");
    $('.sizeguide-popup-container').on('click', function(e) {
      if ( !== this)
      $("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() {
        $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");

    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?

    # December 13, 2017 at 9:55 am

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

    # December 13, 2017 at 10:57 am

    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.

    # December 13, 2017 at 11:21 am

    $(‘#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.

    # December 13, 2017 at 1:32 pm

    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() {
        $("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!

    # December 13, 2017 at 8:40 pm

    Thank you for this post it helped me too.

    # December 14, 2017 at 1:19 am

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

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

    # December 14, 2017 at 1:57 pm

    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.

    # December 14, 2017 at 5:25 pm

    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:

    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.

    # December 14, 2017 at 7:43 pm

    Thank you so much for the replies.

    It really helps me.

    # December 15, 2017 at 4:22 am

    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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.