Webflow sync, pageviews & more.
NEW

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!

TL;DR
  • For HTML5 video, use .pause() and reset currentTime on modal close.
  • For YouTube/Vimeo iframes, clear and restore the src attribute to stop playback.
  • Ensure this logic runs when the modal is closed, e.g., on close button click.

You're trying to stop a video from playing after closing a modal, but your current code ($('#modal-video')[0].pause();) likely targets the element incorrectly or doesn't account for iframe-based embeds like YouTube.

1. Identify Video Type (HTML5 vs Embedded)

  • If your video is an HTML5 <video> element, the pause() method can work.
  • If you're using an embedded video (e.g., from YouTube or Vimeo), you cannot pause it directly using .pause()—you’ll need to reset the iframe src or use the appropriate API.

2. For HTML5 <video> Element

  • Ensure the element has the correct ID or class and is a valid <video> tag.

  • Use this code:

  • Example jQuery: $('#modal-video').get(0).pause();

  • To ensure it resets as well:
    ```js
    var video = $('#modal-video').get(0);
    video.pause();
    video.currentTime = 0;
    ```

3. For YouTube or Vimeo Embed

  • The pause() method does not work on iframe embeds directly.

  • A simple workaround: remove and re-add the iframe on modal close to stop playback.

  • Modify the iframe's src attribute like this:
    ```js
    var iframe = $('#modal-video');
    var src = iframe.attr('src');
    iframe.attr('src', '');
    iframe.attr('src', src);
    ```

  • Or, only remove the src on close, and restore when the modal opens.

4. Apply on Modal Close

  • Make sure this code runs when the modal is closed—for example, tied to a close button or display: none change.
  • Example:
    ```js
    $('.modal-close').on('click', function() {
    var iframe = $('#modal-video');
    var src = iframe.attr('src');
    iframe.attr('src', '');
    iframe.attr('src', src);
    });
    ```

Summary

To stop a video after closing a modal:

  • For HTML5 video, use .pause() and currentTime = 0.
  • For embedded iframes, reset the src attribute.
  • Ensure you're triggering the code when the modal actually closes.

Let me know if you're using a specific video provider—YouTube, Vimeo, or HTML5—so I can refine this further.

Rate this answer

Other Webflow Questions