WP Video Popup opens YouTube, Vimeo and Rumble videos in a responsive lightbox. This guide shows how to add a video popup in Bricks in two steps: add the shortcode, then choose what opens the popup.
In Bricks you add the popup with the Shortcode element and open it from any Button, Image or other element.
Don’t have the plugin yet? Download WP Video Popup for free from WordPress.org.
Step 1: Add the shortcode
- Open your page in Bricks.
- Add a Shortcode element.
- Paste the shortcode into the element’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 element 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 element and style it in Bricks? Give it the CSS class wp-video-popup:
- Add a Button element and set its link to the URL
#. - Go to Style → CSS → 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 element:
- Add an Image element without a link or lightbox.
- Go to Style → CSS → CSS classes.
- Enter
wp-video-popup.
The same works for any other element, like a Heading, Icon or Div: add wp-video-popup under Style → CSS → CSS classes.
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 Bricks editor.
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.