How can I stop HTML5 videos from playing in a Webflow modal when it is closed?
TL;DR
- Assign a unique ID to the video element and use JavaScript to pause and reset it when the modal closes by targeting the close trigger.
- Alternatively, use a Webflow interaction with custom code to stop and reset the video upon modal close.
To stop HTML5 videos from continuing to play after a Webflow modal is closed, you need to reset the video element when the modal is hidden.
1. Add a Unique ID to Your Video Element
- Select your HTML5 video element in the Webflow Designer.
- In the Settings panel (right-hand side), assign a unique ID (e.g., myVideo).
2. Add an Embed Element for Custom Script
- Drag a Embed element into your project (ideally inside or just after the modal wrapper).
- Paste this simple JavaScript to reset the video:
<script> const modal = document.getElementById("yourModalID"); const video = document.getElementById("myVideo"); modal.addEventListener("click", function(event) { if (event.target.classList.contains("w-modal-close")) { video.pause(); video.currentTime = 0; } });</script>- Replace yourModalID with the actual ID of your modal.
- Replace w-modal-close with the class or element that gets clicked to close the modal.
3. Optional: Use a Webflow Interaction Instead
If you're using Webflow interactions to open/close modals:
Go to the Interactions panel.
On the element that triggers the modal to close, add a “Custom Code” action.
Use JavaScript like:
document.getElementById("myVideo").pause(); document.getElementById("myVideo").currentTime = 0;
This way the video is stopped and reset when the modal closes.
Summary
To stop videos from playing after a Webflow modal closes, pause and reset the video either with a custom JavaScript event listener or by using a Webflow interaction with custom code. Use the video’s ID to target it directly.