How can I fix the issue of the sound of a YouTube video continuing to play in the background after closing a pop-up modal on my Webflow site?

TL;DR
  • Inspect the YouTube embed to ensure autoplay settings are correct, and remove autoplay=1 if unnecessary.
  • Add a close action to stop video playback and modify interactions to hide the video when the modal closes.
  • Use JavaScript with YouTube's API to pause the video using player.pauseVideo();.
  • Ensure YouTube embeds include ?enablejsapi=1 for API control and test across browsers for consistency.

If you are experiencing an issue where the sound of a YouTube video continues to play after closing a pop-up modal on your Webflow site, follow these steps to resolve it.

​

1. Inspect the YouTube Embed

  • Check the YouTube embed for attributes that control autoplay and ensure they are correctly set. Remove any autoplay=1 if unnecessary.

​

2. Add a Close Action for the Modal

  • Ensure your modal close button has an interaction that runs when clicked. This should include stopping the video playback.

  

3. Modify the Modal Close Interaction

  • Add a step in the interaction that targets the YouTube video element.
  • Include a step to toggle style visibility to 'hidden' and set 'display' to 'none.'

​

4. Use JavaScript to Stop Video Playback

  • Embed custom JavaScript within the page settings to pause the video.
  • Example: Use YouTube's API to stop the video. 
  • Instantiate the YT player object.
  • Use player.pauseVideo(); within the modal close function.

​

5. Update any Custom Code

  • Check any custom iframe or script attributes related to YouTube embeds. Make sure ?enablejsapi=1 is added to the video URL for API control.

​

6. Test Across Browsers

  • Run tests on different browsers to ensure the issue is consistently resolved across platforms.

​

Summary

To resolve the issue of a YouTube video continuing to play when a pop-up modal closes, configure your modal interactions to hide and stop the video using both Webflow interactions and YouTube's API with JavaScript. Ensure all video embeds are updated to support these controls by including the necessary query parameters.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create an animated hero section on my website using Webflow?
How can I add confetti to my Webflow site using CodePen and CSS?
Are there any workarounds or tips to create long modal windows in Webflow that can be scrolled and have a fixed background with a semitransparent overlay?
What effect is my prospect customer asking about on their current website when they want me to redesign it in Webflow?
Is there an integrated or easy way to set up Google Analytics in Webflow to only track analytics on the production site at a custom domain and fire an event only when a user completes a successful form submission?
How can I display all non-featured blog posts in a second collection list on Webflow, including both featured and non-featured posts, but excluding the newest featured post displayed in the first list? Manually removing the featured flag from the old post every time a new featured post is published is not feasible.
Why are images appearing blurry on my Webflow site after publishing, despite being reuploaded at a high resolution?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
Is it possible to duplicate a scroll interaction on a navbar/logo from one page to another in Webflow?
How does Webflow address high CO2 emissions and strive for green hosting for websites hosted on their platform?
How can I preview draft blogs in Webflow Designer mode?
How can I pass the schedule information of a location to a collection popup in Webflow, so that the client can update the schedule images?
How can I integrate Stripe Checkout on a Webflow site for a simple click payment option? Could you recommend any other checkout options similar to Stripe for a single item purchase?
How can I create a Slider with functional 'next' and 'previous' arrows in Webflow?
How can I retain the styling and spacing (such as bold lettering) when pasting text from a Word document into Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?