How can I stop HTML5 videos from playing in a Webflow modal when it is closed?

TL;DR

Add a unique ID to your HTML5 video in Webflow's Element Settings panel.
Ensure your modal has a close button with a unique class.
Insert custom JavaScript in Page Settings > Footer Code, which detects when the close button is clicked and pauses/resets the video.
Save and publish your site.

If your HTML5 video continues playing after closing a Webflow modal, you need to pause or reset the video when the modal is hidden. Webflow does not handle this automatically, so you'll need custom JavaScript.

1. Add an ID to Your Video

Select your HTML5 video element in Webflow.
In the Element Settings panel, add a unique ID (e.g., modal-video).

Ensure your modal has a close button with a unique class (e.g., .close-modal).

3. Add Custom JavaScript

Open Page Settings and scroll to the Footer Code section.
Add the following script inside the Before tag section:
```html```
Click Save and Publish your site.

Summary

This script detects when the close button is clicked and pauses/reset the video. Ensure your video ID and close button class match what you used in Webflow.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

Is it possible to customize the style of bullets in a list using Webflow's UI?

How can I find the "Wrapper" component in Webflow while reviewing a template I purchased from the store?

How can I stop a video from playing after closing a modal that contains it in Webflow? The current custom code, `$('#modal-video')[0].pause();`, doesn't seem to work. Thanks!

How can I ensure the blur effect in Webflow covers the entire div when using CSS styles like the one shown below?

In Webflow, how can I select and change letters or groups of text to use alternative styles within my purchased font family?

How can I improve the clarity of a video I've added as the background on my homepage in Webflow?

How can I modify the colors and design of the navbar on mobile in Webflow?

Is it possible to change the color of the 'slider-nav-circles' in Webflow before export?

How can I accurately determine when Lottie Animations on a Webflow page are fully loaded and ready to be displayed? I have tried using the window.load() event with JavaScript, but it fires before the .json files are finished downloading. I need a solution to create a preloader that disappears when the Lottie animation is loaded and displayed on my website.

How can I create a full-width background video using a Vimeo embed without the controls and with autoplay, but without it being 100vw and 100vh in Webflow?

How can I add the onClick attribute to elements in Webflow for analytics purposes?

How can I integrate custom code (such as JavaScript) into Webflow to allow users to copy and paste HTML and CSS from a resume they like on my website into their own Webflow account, similar to how Flowbase does it?

How can I add animated SVG icons, illustrations, and business logos to my website using Webflow?

How do I enable scrolling within a popup in Webflow using the mouse wheel or trackball on devices without touchscreens or trackpads?

How can I disable the default form submission and redirect functions in Webflow without breaking the code, while still being able to use my own JavaScript function?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I dynamically redirect to a CMS created after form submission in Webflow?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

How can I close a dropdown in Webflow when clicking on a link?

Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?

How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?

How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?

How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?

How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

How can I change the language of the Google Maps embed from English to Arabic in Webflow?

How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?