Stop Video When the Popup Closes

The following custom code examples show you how to stop video play when your video popup closes.

YouTube (no other query parameters in the src URL) #

jQuery('#pum-123')
    .on('pumBeforeClose', function () {
        var $iframe = jQuery('iframe', jQuery(this)),
            src = $iframe.prop('src');
        $iframe.prop('src', '').prop('src', src.replace('?autoplay=1', ''));
    });

View the source on GitHub.

YouTube (if already other query parameters in the src URL) #

Follow this next YouTube code sample if you added the autoplay and mute parameters to the embed  src URL like this.

src="https://www.youtube.com/embed/s-OoG1aGYO0?start=1&autoplay=1&mute=1"

jQuery('#pum-123') 
    .on('pumBeforeClose', function () { 
        var $iframe = jQuery('iframe', jQuery(this)),
             src = $iframe.prop('src');
         $iframe.prop('src', '').prop('src', src.replace('&autoplay=1&mute=1', '')); // Remove the appended query parameters. Remove mute too if you added it before for Chrome.
     });

The code sample above removes the autoplay and mute query parameters from the existing query parameter list of the src URL.

Here’s what the  src URL would look like after the jQuery code runs.

src="https://www.youtube.com/embed/s-OoG1aGYO0?start=1"

Vimeo #

jQuery('#pum-123')
    .on('pumBeforeClose', function () {
        var $iframe = jQuery('iframe', jQuery(this)),
            src = $iframe.prop('src');
        $iframe.prop('src', '').prop('src', src.replace('&autoplay=1', ''));
    });

View the source on GitHub.

HTML5 #

jQuery('#pum-123')
    .on('pumBeforeClose', function () {
        var $video = jQuery('video', jQuery(this));
        $video[0].pause();
    });

View the source on GitHub.