Pop-up video still playing after close

Design help Animations & Interactions
1

Hey all,

I created a pop-up video using this tutorial:

And after a few tweaks, I was successful. However, I’ve noticed that if you play the video and then close the Modal, it just keeps playing. How can I make the video stop if the Modal is closed?

Thanks!

Here is my public share link: [Webflow - Fast-Weigh]

2

I read somewhere that I have to use custom code, but I’m not an experienced coder. If anyone could provide a walkthrough, I would be so grateful!

3

Hello @gjeter,

So to do what you want you need to assign your close modal x an id of pausebutton, on your footer code paste the following code, and finally at the end of your video url add “?enablejsapi=1”

<script>
// https://developers.google.com/youtube/iframe_api_reference

// global variable for the player
var player;

// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player('video', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  

  var pauseButton = document.getElementById("pausebutton");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  });
  
}

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

Please let me know if it works.

4

Pablo,

Thank you so much for your help. For some reason, it isn’t letting me place that “?enablejsapi=1” suffix on the video URL. It keeps telling me it’s an invalid embed URL. I tried adding it as both a Webflow Youtube element, and a regular video element. I also tried redoing the video as just an HTML embed with Youtube’s iframe, and I added the suffix to the URL in the embed code, but this still didn’t work.

Any ideas?

Thank you!

5

Hello @gjeter,

Sorry to hear that solution didn’t work for you. I don’t really know why. Try this other code instead

<script>

      $('.Close Modal Button').click(function(e) {
        e.preventDefault();
        $('.Pop-Up Video').children('iframe').attr('src', '');
      });

    </script>

Please let me know how it goes.

6

Hey I tried this and its not working for me. Any ideas?

7

Hello @Zach_Schwartz, this post was before Weblfow’s lightbox, you should use that now, it works right out of the box, it stops the video from playing after the modal is closed. I hope this helps.