This is a common issue #
One common issue when adding a video to a popup is that the video keeps playing after the user closes the popup.
The causes may vary from case to case and the solution will depend on your specific configuration:
- What plugin are you using to create the popup?
- Is your video self-hosted or is it from YouTube, Vimeo or something else?
In Google you can find different solutions for different configurations . On this post, we will show you how to fix this issue when using the Popup Maker plugin.
Using the Videos Extension #
If you are using the Videos Extension from Popup Maker, the plugin author tells you how to fix this issue easily:
https://wordpress.org/support/topic/video-keep-playing-even-though-popup-is-closed/#post-15689394
Embed video in the Content Editor #
But in case that you don’t want to add one more plugin to your site, you can use the following javascript code:
/**
* Popup Videos
*
* Prevent popup videos to keep playing after closing the popup (error occurs in Chrome).
*/
( function( $ ) {
$( document ).on( 'pumBeforeOpen', '.pum', function() {
let $iframes = $( this ).find( 'iframe' );
$iframes.each( function() {
let src = $( this ).data( 'removed-src' );
if ( src ) {
$( this ).attr( 'src', src );
}
} );
} );
$( document ).on( 'pumAfterClose', '.pum', function() {
let $iframes = $( this ).find( 'iframe' );
$iframes.each( function() {
$( this ).data( 'removed-src', $( this ).attr( 'src' ) );
$( this ).attr( 'src', 'about:blank' );
} );
} );
} )( jQuery );
How does it work? #
First, we need to mention that the error doesn’t occur on all the browsers. When the popup is closed, the <div> that contains the video iframe is set to display: none; and that’s enough for most of the browsers to stop playing the video. But at least, Google Chrome keeps playing that video.
So, this plugin will change the src of the hidden iframe to a blank page, that way the video will stop playing.
But it will also save the video URL to add it back in case you open the popup again.
