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.
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.

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"

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.

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

View the source on GitHub.

If you are not already familiar with using custom JavaScript, view our guide Getting Started with Custom JavaScript.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.