← Documentation

How to add a video popup in WordPress

Last updated:

WP Video Popup opens YouTube, Vimeo and Rumble videos in a responsive lightbox. Adding one takes two steps: place the shortcode, then choose what opens the popup - a button, an image or any other element on the page.

Don’t have the plugin yet? Download WP Video Popup for free from WordPress.org.


Step 1: Add the shortcode

Paste the shortcode into any post, page, custom post type or template file and replace the URL with your own video:

[wp-video-popup video="https://www.youtube.com/watch?v=YlUKcNNmywk"]

Tip: build your shortcode under Settings → WP Video Popup and copy it with one click.

YouTube video popup

[wp-video-popup video="https://www.youtube.com/watch?v=YlUKcNNmywk"]

Want YouTube’s privacy-enhanced mode? Use a youtube-nocookie.com link instead.

Vimeo video popup

[wp-video-popup video="https://vimeo.com/136696258"]

Rumble video popup

Use the Rumble video page or its embed link:

[wp-video-popup video="https://rumble.com/embed/v4j2rri/?pub=4"]

Step 2: Choose what opens the popup

Open the video popup on button click

Add the text attribute and the shortcode outputs a button (styled by your theme) that opens the popup:

[wp-video-popup video="https://www.youtube.com/watch?v=YlUKcNNmywk" text="Watch video"]

Open the video popup by clicking an image

Wrap an image (or any other content) in the shortcode to turn it into a clickable video thumbnail:

[wp-video-popup video="https://www.youtube.com/watch?v=YlUKcNNmywk"]<img src="thumbnail.jpg" alt="Watch video">[/wp-video-popup]

Open the video popup from any element

Add the CSS class wp-video-popup to any button, link or image on the page:

<a href="#" class="wp-video-popup">Watch video</a>

Live demo: Play video

Here’s where to find the CSS class field in your page builder:

  • Block editor (Gutenberg): Advanced → Additional CSS class(es)
  • Elementor: Advanced → CSS Classes
  • Divi: Advanced → CSS ID & Classes
  • Bricks: Style → CSS → CSS classes

Step-by-step guides: Elementor, block editor (Gutenberg), Divi and Bricks.

The free version supports one video popup per page. To add more, see multiple video popups (PRO).


Shortcode attributes

Customize the popup with these attributes:

Button text

Outputs a button that opens the popup.

text="Watch video"

Mute video

mute="1"

Start at a specific time

Value in seconds.

start="24"

Portrait mode

For vertical videos.

portrait="1"

Hide related videos (YouTube)

hide-related="1"

Since September 2018, YouTube no longer allows hiding related videos completely. Videos from your own channel are shown instead.

Example with attributes

[wp-video-popup video="https://www.youtube.com/watch?v=YlUKcNNmywk" mute="1" start="24" text="Watch video"]

Need to add other parameters to the embed URL? Use the wp_video_popup filter.


Related guides

Still need help?

Browse the other articles or create a support ticket and we'll get back to you.