Start Video When the Popup Opens

The following custom code examples show how you can auto-play videos when your video popup opens.

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

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

View the source on GitHub.

Visit our API doc to learn more about Popup Maker events like pumBeforeOpen.

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

Follow this next YouTube code sample if your YouTube embed src URL already has a query parameter like this.

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

jQuery('#pum-123')
    .on('pumBeforeOpen', function () {
        var $iframe = jQuery('iframe', jQuery(this)),
            src = $iframe.prop('src');
        $iframe.prop('src', '').prop('src', src + '&autoplay=1&mute=1'); // Append to the query parameters list. Add mute to autoplay on Chrome.
    });

The code sample above adds the autoplay and mute query parameters to 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&autoplay=1&mute=1"

Vimeo #

jQuery('#pum-123')
    .on('pumBeforeOpen', function () {
        var $iframe = jQuery('iframe', jQuery(this)),
            src = $iframe.prop('src');
        $iframe.prop('src', '').prop('src', src + '&autoplay=1'); // Add &muted=1 if needed.
    });

View the source on GitHub.

HTML5 #

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

View the source on GitHub.