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
  • Properly configure the modal's close action to stop video playback by ensuring the YouTube video is embedded correctly and linked to a trigger.
  • Add custom JavaScript in Webflow's Settings to halt the video using document.querySelector and test the functionality by publishing the site.

To resolve the issue of YouTube video sound continuing after closing a pop-up modal in Webflow, you'll need to properly configure the modal's close action to stop the video playback.

​

1. Ensure Popup Modal Links Correctly

  • Check that the modal is properly linked to a button or trigger that opens and closes the modal.
  • Verify that the YouTube video is correctly embedded within the modal.

​

2. Add Custom Code to Stop Video

  • Go to Project Settings in your Webflow Dashboard.
  • Select the Custom Code tab to insert additional JavaScript.

​

3. Implement JavaScript for Video Stop

  • Enter this JavaScript code in the Footer Code section:
  • Identify the video iframe using JavaScript.
  • Add code to stop the video when the modal is closed.

​

Here's an inline explanation: Use document.querySelector to select the video iframe and call the pause method or set the src to an empty string when the modal close button is clicked.

​

4. Test the Modal Functionality

  • Publish your site and test the modal by opening and closing it to ensure the sound stops when closed.

​

Summary

Ensure the YouTube video inside a Webflow modal stops playing after closing by adding custom JavaScript that targets the iframe element and controls its playback state when the modal is dismissed.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What could be causing the error in the console when trying to integrate Mailchimp with Webflow and the form is not submitting?
Is there a way to connect Webflow to external APIs and build connections to web services using Vue.js and Axios in order to integrate data from different databases?
Can Webflow support additive overlay?
How can I set the opacity of background images in Webflow using pseudo elements or hand-coding?
How do I horizontally center a button within the middle column of a set of 3 columns in Webflow to ensure it looks good on all devices?
Do all links in my Webflow website need to be in the format of https:// for them to work properly, or do I have any settings configured incorrectly?
What are some third party tools or integrations for Webflow?
How can I provide user accounts for my e-commerce website in Webflow, allowing customers to save their profile information and shipping addresses?
How can I fix the bug in Webflow where a CMS content item is missing from a product accordion?
Can Webflow be used to build a Cookie Popup that allows users to accept or decline cookies on a website?
What are the differentiators of the multi-language solution for Webflow called Linguana in comparison to Weglot?
Can the form's action in Webflow be overwritten using JavaScript when the checkbox is unchecked, without causing a "405 Not Allowed" error?
What are the rules for participating in the Webflow Forums and how can you include your Public Link with your question?
How can I correctly set up the robots.txt file in Webflow to ensure certain pages are not ignored by search engines?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
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?