WP Video Popup opens YouTube, Vimeo and Rumble videos in a responsive lightbox. This guide shows how to add a video popup in Divi in two steps: add the shortcode, then choose what opens the popup.
In Divi you add the popup with a Code module and open it from any Button, Image or other module.
Don’t have the plugin yet? Download WP Video Popup for free from WordPress.org.
Step 1: Add the shortcode
- Open your page in the Divi Builder.
- Add a Code module (a Text module works too).
- Paste the shortcode into the module’s content.
[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 Code module 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 module and style it in Divi? Give it the CSS class wp-video-popup:
- Add a Button module and set its Button Link URL to
#. - Go to Advanced → CSS ID & Classes → CSS Class.
- Enter
wp-video-popup.
Option 3: Open the popup by clicking an image
Turn any image into a video thumbnail with the Image module:
- Add an Image module without a link and with Open in Lightbox turned off.
- Go to Advanced → CSS ID & Classes → CSS Class.
- Enter
wp-video-popup.
The same works for any other module, like a Blurb or Text module: add wp-video-popup under Advanced → CSS ID & Classes → CSS Class.
Enter the class without a dot: wp-video-popup, not .wp-video-popup.
Test the popup
Save the page and test the popup on the front end. It doesn’t open inside the Divi Builder.
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.