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!

To stop a video from continuing to play after closing a modal in Webflow, the issue is likely due to the way browser video APIs or iframe embeds behave. If you're using a YouTube or Vimeo embed, .pause() won't work because it's an iframe, not a native HTML5 video.

​

1. Identify the Video Type

​

• If it’s a native HTML5 video element (<video>), .pause() and .currentTime = 0 should work.
• If it’s an iframe embed (e.g., YouTube), you cannot pause it directly with .pause().

​

2. For Native HTML5 Videos

​

Use the following approach in your custom code:

​

• Make sure you're selecting the <video> element correctly.
• Example:

  ```javascript

  var vid = document.getElementById("modal-video");

  vid.pause();

  vid.currentTime = 0;

  ```

​

• Add this inside the modal close trigger or in the function that hides the modal.

​

3. For YouTube Iframe Embeds

​

YouTube iframes require resetting their src to stop playback:

​

• Select the iframe and reset its src like this:

  ```javascript

  var iframe = document.getElementById("youtube-iframe");

  var currentSrc = iframe.src;

  iframe.src = currentSrc;

  ```

​

• This will reload the video and stop it from playing.

​

4. Optional: Use YouTube Player API (Advanced)

​

If you need more control (like .stopVideo()), integrate the YouTube Iframe Player API, but this adds additional setup and scripting.

​

Summary

​

To stop video playback after closing a modal in Webflow:

• Use .pause() and .currentTime = 0 for native video elements after ensuring correct selection.
• For YouTube or iframe videos, reset the src attribute to stop playback.
• .pause() does not work on iframes, so check your video type.