How can I stop a YouTube video from playing in a custom modal on Webflow when the modal is closed?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To stop a YouTube video from playing in a custom modal on your Webflow site when the modal is closed, you can use JavaScript in combination with the YouTube API. Here's how you can achieve this:

Add the YouTube iframe API script to your site:

Go to the YouTube iframe API documentation page (https://developers.google.com/youtube/iframe_api_reference) and copy the following script tag:
```html ```
In your Webflow project, go to the Project Settings, select the Custom Code tab, and paste the script tag into the Footer Code section.

Create a custom modal on your Webflow site:

Add a button or any element that triggers the modal.
Create a div as the modal container and style it according to your design.

Embed the YouTube video inside the modal:

Drag and drop an embed element into the modal container div.
In the YouTube video URL, change "watch?v=" to "embed/" to get the embed URL. For example, change https://www.youtube.com/watch?v=VIDEO_ID to https://www.youtube.com/embed/VIDEO_ID.
Configure the embed element's settings (autoplay, controls, etc.) to fit your requirements.

Add JavaScript to control the video playback:

In your Webflow designer, select the page where the custom modal is located.
Click on the </> symbol in the top-right corner to access the Custom Code panel.
In the Head Code section, paste the following JavaScript function:
```javascript ```
This function uses the YouTube API to stop the video playback when called.

Add an event listener to the modal close button:

Select the close button element inside your modal.
In the Settings panel, go to the On Click event section and click + Add New Interaction.
Choose the Run JavaScript action and enter stopVideo(); as the function to execute.

Publish your site and test:

Preview or publish your Webflow site.
Open the modal by triggering it and play the video.
Close the modal and ensure that the video stops playing.

By following these steps, you can ensure that YouTube videos embedded in your custom modals on Webflow will stop playing when the modal is closed, providing a better user experience.

Additional questions:

How do I embed a YouTube video in Webflow?
Can I customize the appearance of the YouTube player in Webflow?
What other methods can be used to embed videos on Webflow?

Is it possible to add YouTube videos to Webflow without the overlay title of the video appearing?

How can I fix the issue where all arrows on each swiper slider only affect the first one, even when I attach a different class name for each swiper to their own?

Can Webflow allow for the addition of a video in a lightbox that automatically loads and opens on page load?

How can I make the content div on my Webflow site scrollable?

Is there a way to add custom code in Webflow to make all external links on a site "noopener" or "noreferrer" as recommended by Google Lighthouse?

Have you encountered the "Couldn't read native clipboard data" error when trying to copy/paste elements in Webflow on Chrome?

How can I modify my code in Webflow to ensure that the "Explore Durham Neighborhoods" button on the home page goes to the Durham tab on the Neighborhoods page, and the "Explore Cary" button goes to the Cary tab?

How can I fix the issue of my auto-self-scrolling marquee not finishing or looping correctly on my client's Webflow site?

How can I add a "scroll-to-top" option using Swup.js in my Webflow project?

What steps have you taken so far to add code to track conversion on your landing page in Webflow?