How to pause videos in a modal on close (Webflow Tutorial)

A common issue with modals and Webflow sites, is that sometimes videos can continue to play after the modal is closed. Not ideal. Obviously, this can create a frustrating experience for your users.

In this tutorial, we’ll walk you through how to add custom code to your Webflow site to ensure that videos pause whenever a modal is closed. Let’s get cracking!

First, you’ll need to add some custom code to the “Before” section of your page section. If you’re not familiar with how to do that, Webflow University has a great guide here.

Add the following custom script, which will stop the video whenever the modal closes.

$(document).ready(function() {
    var src = $('#videoplayer').children('iframe').attr('src');

    $('.open-popup').click(function(e) {
        e.preventDefault();
        $('#videoplayer').children('iframe').attr('src', src);
        $('.popup-bg').fadeIn();
    });

    $('.close-popup').click(function(e) {
        e.preventDefault();
        $('#videoplayer').children('iframe').attr('src', '');
        $('.popup-bg').fadeOut();
    });
});

How does it work?

When the modal is closed, the video src is cleared, removing it altogether!

For any further details, or to ask question, check out the original discussion on Webflow’s Forum.