How can I prevent a video from continuing to play after I close a modal in Webflow?

Published on
September 22, 2023

To prevent a video from continuing to play after you close a modal in Webflow, you can follow these steps:

  1. Embed the video: Start by embedding the video onto your page within the modal using Webflow's native Embed element. You can do this by dragging and dropping the Embed element onto your modal on the canvas.

  2. Add JavaScript code: Within the Embed element, you'll need to add a custom JavaScript code that will control the video. To access the JavaScript Editor, click on the "Settings" tab on the right panel and then click on "Custom Code."

  3. Write the JavaScript code: Within the JavaScript Editor, you'll need to write a code snippet that references the video element and pauses it when the modal is closed. Here's an example code snippet you can use:

<script>var modal = document.getElementById('yourModalID'); // replace 'yourModalID' with the actual ID of your modalvar video = document.getElementById('yourVideoID'); // replace 'yourVideoID' with the actual ID of your videomodal.addEventListener('hidden.bs.modal', function (event) {  video.pause();})</script>
  1. Apply IDs to the modal and video elements: Make sure to assign unique IDs to both the modal element and the video element. You can do this by selecting each element and setting their IDs in the right panel under the "Settings" tab.

  2. Publish your site: Once you have added the JavaScript code and assigned the IDs, save and publish your site to see the changes take effect.

By following these steps, you will be able to prevent a video from playing after you close a modal in Webflow.

Additional Questions:

  1. How do I embed a video in Webflow?
  2. How can I add custom code to my Webflow site?
  3. Can I autoplay a video in a Webflow modal?