How can I stop a video from playing after closing a popup window in Webflow?

Published on
September 22, 2023

To stop a video from playing after closing a popup window in Webflow, you can utilize Webflow's built-in interactions. Follow these steps:

  1. Select the popup element: Identify the popup element that contains the video you want to stop playing. This is usually a modal or a lightbox element.

  2. Create a new interaction: In the Interactions panel, click on the plus sign "+" to create a new interaction.

  3. Choose the trigger: Select the trigger that will initiate the interaction. In this case, you'll want to select the "Close" interaction for when the popup is closed.

  4. Add an action: Add the appropriate action that will stop the video from playing. To do this, click on the plus sign "+" within the "Choose an action" section. Depending on the type of video player you are using, the exact action may vary. Here are some common actions:

  • HTML5 video: Choose the "Set Style" action and set the display property of the video element to "none". This will hide the video when the popup is closed, effectively stopping it from playing. Make sure to identify the specific video element using a class or ID.

  • YouTube or Vimeo embed: Choose the "Set Attribute" action and change either the source or iframe's "src" attribute to an empty string (""). This will effectively remove the source of the video, stopping it from playing. Again, be sure to identify the correct element.

  1. Test the interaction: Preview your website to ensure that the video stops playing when the popup is closed. Make any necessary adjustments to the interaction if needed.

Remember to save your changes and republish your site to make sure the changes are live. With these steps, you can easily stop a video from playing after closing a popup window in Webflow.

Additional questions:

  1. How do I create a modal popup in Webflow?
  2. What are interactions in Webflow and how can I use them?
  3. How can I embed a YouTube or Vimeo video in Webflow?