Webflow sync, pageviews & more.
NEW

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.

Rate this answer

Other Webflow Questions