Start Video When the Popup Opens

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

Note: Replace the example popup ID (123) with your popup's ID number. Learn how to find the popup ID.

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');
    });

Vie the source on GitHub.

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();
    });