WP Video Popup opens YouTube, Vimeo and Rumble videos in a responsive lightbox. This guide shows how to add a video popup in Elementor in two steps: add the shortcode, then choose what opens the popup.
Elementor doesn’t need Elementor Pro for this. You add the popup with the free Shortcode widget and open it from any Button, Image or other widget.
Don’t have the plugin yet? Download WP Video Popup for free from WordPress.org.
Step 1: Add the shortcode
- Edit your page with Elementor.
- Search for the Shortcode widget and drag it onto the page.
- Paste the shortcode into the widget’s Shortcode field.
[wp-video-popup video="https://www.youtube.com/watch?v=YlUKcNNmywk"]Replace the URL with your YouTube, Vimeo or Rumble link. Tip: build the shortcode under Settings → WP Video Popup and copy it with one click.
Step 2: Choose what opens the popup
Option 1: Let the shortcode add a button
The quickest way. Add the text attribute in the Shortcode widget and it 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"]Option 2: Open the popup on button click
Want to use the Button widget and style it in Elementor? Give it the CSS class wp-video-popup:
- Add a Button widget and set its Link to
#. - Go to Advanced → Layout → CSS Classes.
- Enter
wp-video-popup.
Option 3: Open the popup by clicking an image
Turn any image into a video thumbnail with the Image widget:
- Add an Image widget and set Link to None.
- Go to Advanced → Layout → CSS Classes.
- Enter
wp-video-popup.
The same works for any other widget, like a Heading, Icon or Image Box: add wp-video-popup under Advanced → Layout → CSS Classes.
Enter the class without a dot: wp-video-popup, not .wp-video-popup.
Test the popup
The popup doesn’t open inside the Elementor editor. Click Preview or view the published page to test it.
Using a caching plugin? Clear the cache after adding the popup.
Multiple video popups on one page (PRO)
The free version supports one video popup per page. With WP Video Popup PRO you can add as many as you like. Give each shortcode a unique ID and use that ID as the CSS class of its button or image:
[wp-video-popup id="video1" video="https://www.youtube.com/watch?v=YlUKcNNmywk"]
[wp-video-popup id="video2" video="https://vimeo.com/136696258"]Then add video1 as the CSS class of the first button and video2 to the second one. PRO also adds video galleries and autoplay on page load.
Popup doesn’t work?
- Nothing happens on click: check that the CSS class is spelled exactly
wp-video-popupand that the shortcode is on the same page. - The wrong video plays: see popup plays the wrong video.
- The video doesn’t start on its own: see video popup doesn’t autoplay.