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!
- Use
.pause()and resetcurrentTimefor HTML5 videos. - For YouTube embeds, reset the iframe's
srcto stop playback. - For Vimeo, use the Vimeo Player API with
.pause()on the iframe element. - Ensure your code runs on modal close and targets the correct element IDs.
If $('#modal-video')[0].pause(); isn't stopping the video in your Webflow modal, it's likely because the method only works on HTML5 <video> elements, not on embedded Vimeo or YouTube videos. Here's how to handle both types correctly.
1. Check the Type of Video
- HTML5 Video:
<video id="modal-video" ...></video>—pause()should work. - Embedded Videos (YouTube/Vimeo): Use postMessage API or reload the iframe.
2. For HTML5 Video
If you're using an HTML5 <video>, but pause() still doesn't work, try this:
Ensure jQuery is loaded (Webflow includes it by default).
Add this line in your modal close handler:
$('#modal-video')[0].pause(); $('#modal-video')[0].currentTime = 0;This pauses and rewinds the video.
3. For Embedded YouTube Video
Webflow users often embed YouTube using an <iframe>:
Use the
srcreset method to stop playback:$('#youtube-iframe').attr('src', $('#youtube-iframe').attr('src'));This reloads the iframe, effectively stopping the video.
Alternatively: Use YouTube Player API for more control via JavaScript, which requires a more complex integration.
4. For Embedded Vimeo Video
If the modal uses a Vimeo iframe:
Use the Vimeo Player API by adding this to your custom code:
Include Player SDK via CDN:
Add this inside your<head>or before</body>:<script src="https://player.vimeo.com/api/player.js"></script>JavaScript Example:
```
var vimeoPlayer = new Vimeo.Player(document.getElementById('vimeo-iframe'));
vimeoPlayer.pause();
```Make sure the iframe has an ID like
vimeo-iframe.
5. Place Your Code in the Right Location
Always insert the custom code in Page Settings > Before