To stop a YouTube video from playing in the background when you close a modal in Webflow, you can use the YouTube API and some custom code.
Here's a step-by-step guide on how to achieve this:
1. Add the YouTube Player API script to your Webflow project. You can do this by going to your Webflow project settings, and under the Custom Code section, paste the following script before the closing `
` tag:
```html
```
2. Add an embed code component to your Webflow modal. You can find this component in the add panel on the left-hand side of the designer interface. Click on the `+ Add` button, search for "embed code," and drag the component into your modal.
3. Edit the embed code component and paste the following code snippet into the embed field:
```html
\`\`\`
4. Give the embed code component a unique class name. Select the embed code component, go to the settings panel on the right-hand side, and assign it a class name like "youtube-player" (without quotes).
5. Add the following custom code to your Webflow project. Go to the page settings of the page where your modal is located, and under the Custom Code section, paste the following script before the closing `` tag:
```html
```
6. Add an additional custom code to your Webflow project to trigger the `stopVideo()` function when the modal closes. You can achieve this by adding an event listener to the close button or the modal container.
For example, if you have a close button with the class name "close-button," you can use the following script to trigger the `stopVideo()` function:
```html
```
Make sure to replace '.close-button' with the appropriate selector for your close button element.
7. Lastly, when you want to play a video inside the modal, you can call the `playVideo(videoId)` function. Replace 'videoId' with the YouTube video ID you want to play. You can find the video ID in the YouTube video URL after the `?v=` parameter.
That's it! With these steps, you should be able to control the YouTube video playback inside the Webflow modal, stopping it from playing in the background when the modal is closed.
Remember to test your implementation to ensure it works as expected.