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 need to reset the video source or use custom JavaScript to stop it. Here's how you can accomplish that:

​

1. Use an HTML Embed with JavaScript

• Locate the modal in your Webflow project where the video is embedded.
• Use an HTML Embed widget in your modal to interact with the video using JavaScript.

​

2. Add JavaScript to Stop Video

• Add the following custom code inside the HTML Embed in the modal:
• Create a function to reset the video source, effectively stopping the video when the modal closes.
• Example: 

    ```html

    <script>

    function stopVideo() {

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

       video.src = video.src;

    }

    </script>

    ```

• Identify the video using an ID (e.g., 'your-video-element-id') and replace it with your actual video ID.

​

3. Trigger the Function on Modal Close

• Attach the stopVideo() function to the modal close event using Webflow's interactions:
• In the Webflow Designer, access the Assets panel and locate your modal.
• Create an interaction that triggers on modal close.
• Use Run Custom Code in the interaction settings to call the stopVideo() function.

​

4. Verify the Video Element ID

• Ensure the video element within your modal has the correct ID you've referenced in the script.
• Double-check the ID assignment in the Webflow designer to prevent any errors.

​

Summary

To stop a video from playing when a modal closes in Webflow, add a custom JavaScript function in an HTML Embed widget within your modal. Use this function to reset the video source and trigger it through Webflow interactions when the modal closes.