How can I pause/stop a video from playing when a modal is closed in Webflow?

To pause or stop a video from playing when a modal is closed in Webflow, you can use a combination of Webflow interactions and custom code. Here are the steps to achieve this:

1. Create your modal and add a video element to it. Make sure the video is set to autoplay.
2. Set a trigger to open the modal, such as a button or a link.
3. Add a close button inside the modal to trigger the modal's close interaction.
4. Go to the Interactions panel and create a new interaction for the modal's close button.
5. Add an animation to the close button to hide or fade out the modal.
6. In the same interaction panel, add a second animation for the video element inside the modal.
7. In this animation, set the video's playback state to "paused" or "stop".
8. Publish your site and test the modal. The video should stop playing when the modal is closed.

If the above steps don't work for you, you can try using custom code. Follow the steps below to achieve this:

1. Add a class to the modal's close button (e.g., "close-btn").
2. Open the page settings and add a custom code block before the closing tag.
3. In the custom code block, add the following JavaScript code:

<script>document.querySelector('.close-btn').addEventListener('click', function() {  var video = document.querySelector('.video-element-class');  video.pause();});</script>

1. Replace '.close-btn' with the class selector of your modal's close button.
2. Replace '.video-element-class' with the class selector of your video element inside the modal.
3. Save and publish your site. The video should now pause or stop when the modal is closed.

Following these steps will allow you to pause or stop a video from playing when a modal is closed in Webflow.

Additional Questions:

1. How do I create a modal in Webflow?
2. Can I autoplay a video in Webflow?
3. How can I add custom code in Webflow?