---
title: Start Video When the Popup Opens
description: "The following custom code examples show how you can auto-play videos when your video popup opens. **Note**: Replace the example [popup ID](https://wppopupmaker.com/docs/manage-features-or-options/find-the-popup-id/) (123) with your popup's ID number. Learn how to [find the popup ID](https://wppopupmaker.com/docs/manage-features-or-options/find-the-popup-id/). ## YouTube (no other query parameters…"
url: "https://wppopupmaker.com/docs/special-popups/start-video-when-the-popup-opens/"
updated: "2026-10-21"
category: Advanced / Special Popups
---

# 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](https://wppopupmaker.com/docs/manage-features-or-options/find-the-popup-id/) (123) with your popup's ID number. Learn how to [find the popup ID](https://wppopupmaker.com/docs/manage-features-or-options/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');
    });
```

View the source on [GitHub](https://github.com/PopupMaker/Library/blob/master/Video/youtube-play-on-open.js).

Visit our API doc to learn more about [Popup Maker events like pumBeforeOpen](https://github.com/PopupMaker/Popup-Maker/wiki/Popup-Maker-JavaScript-&-jQuery-API#events).

## 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](https://github.com/PopupMaker/Library/blob/master/Video/vimeo-play-on-open.js).

## HTML5

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

View the source on [GitHub](https://github.com/PopupMaker/Library/blob/master/Video/html5-video-play-on-open.js).

  If you are not already familiar with using custom JavaScript, view our guide [Getting Started with Custom JavaScript](http://docs.wppopupmaker.com/article/84-getting-started-with-custom-js).