How can I stop a video from playing when a modal is closed in Webflow? I've tried using an HTML embed but it didn't work.

To stop a video from playing when a modal is closed in Webflow, you can use a combination of Webflow interactions and custom JavaScript. Here’s how you can achieve it:

​

1. Configure the Modal Structure

• Ensure your modal is properly set up with a close button or a close action that a user can click to hide the modal.
• Place the video inside the modal, using either an embedded video component or a separate custom embed for more control.

​

2. Add a Custom Code Embed

• Go to Webflow Designer and select the modal where the video is embedded.
• Add an HTML Embed element either inside the modal or in the page settings to include custom JavaScript.
• In the custom code embed, insert the following JavaScript, where "modal-id" is your modal's unique ID, and "video-element-id" is your video element’s unique ID.

  ```javascript

  <script>

  document.getElementById('close-button-id').addEventListener('click', function() {

     var video = document.getElementById('video-element-id');

     video.pause();

     video.currentTime = 0;

  });

  </script>

  ```

• Replace 'close-button-id' with the ID or class name of your modal's close button.

​

3. Test the Functionality

• Preview your project in Webflow's Designer.
• Click the modal, play the video, and then click the close button to ensure the video stops playing and resets.

​

4. Adjust for Embedded Videos

• If using a platform like YouTube or Vimeo, use the appropriate API to stop the video when the modal closes. This generally requires loading the platform’s API script and utilizing corresponding JavaScript methods such as player.pauseVideo() for YouTube.

​

Summary

To stop a video when closing a modal in Webflow, use JavaScript to pause and reset the video on the modal's close event. Ensure your modal and video have unique IDs and adjust the code as needed for embedded platforms like YouTube or Vimeo using their respective APIs.