How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?

To resolve the issue of a YouTube video continuing to play in audio mode after closing a modal in Webflow, follow these steps to ensure the video pauses or stops:

​

1. Identify the Modal and Video Element

• Locate the modal in your Webflow project where the YouTube video is embedded.
• Inspect the element structure to determine the class or ID assigned to the modal and the YouTube iframe.

​

2. Add a Custom Embed

• Open the custom code section within the modal or the page where the video exists.
• Place an embed code that will handle the pause functionality using YouTube's API.

​

3. Utilize YouTube API for Pause Functionality

• Load the YouTube Iframe API by including a script link in your project settings under the "Custom Code" section, before the closing </body> tag.
• Attach event listeners to detect when the modal closes. This can be achieved by identifying the close button of the modal.

​

4. Write Custom JavaScript Code

• Create a function to pause the video using the YouTube Player API. A sample code snippet:

  ```javascript

  function onYouTubeIframeAPIReady() {

    var player;

    player = new YT.Player('video-id', {

      events: {

        'onReady': onPlayerReady

      }

    });

  }

​

  function onPlayerReady(event) {

    var modalCloseBtn = document.querySelector('.close-modal-button');

​

    modalCloseBtn.addEventListener('click', function() {

      event.target.pauseVideo();

    });

  }

  ```

• Replace 'video-id' with the actual ID of your video iframe.

​

5. Test the Implementation

• Preview your Webflow site and open the modal.
• Play the video and then close the modal to ensure the video pauses as expected.

​

Summary

To stop a YouTube video from playing when a modal closes in Webflow, use the YouTube Iframe API to programmatically pause the video. By attaching an event listener to the modal's close button, you can trigger a pause function, ensuring the video stops when the modal is no longer visible.