Streaming live at 10am (PST)

Pop-up video still playing after close

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: [https://preview.webflow.com/preview/tacinsight?utm_medium=preview_link&utm_source=dashboard&utm_content=tacinsight&preview=1f1e8085c958dea08f35dfb9b23ce2b0&mode=preview]

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!

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.

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!

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.