Video popups are a powerful way to grab attention, increase engagement, and drive action, right when it matters most. As studies show, people now spend nearly half their online time watching videos, and the majority prefer learning about products through short, engaging clips.
If you want your visitors to actually watch your videos and take action, putting them in a popup video is one of the smartest moves you can make—it keeps their focus, eliminates distractions, and delivers your message exactly when they’re most likely to engage.
This not only makes the experience smoother but also boosts time on site, click-through rates, and conversions. Simply put, if you want your message to be seen and remembered, a well-timed video popup is one of the most effective tools you can use.
Let’s learn how to create a video popup with everyone’s favorite Free Popup Builder, the Depicter.
This video walks you through the entire process of creating a video popup with Depicter, but if you prefer step-by-step written instructions, just keep reading.
Step 1: Install Depicter Free
- Log in to your WordPress dashboard.
- Go to Plugins > Add New.
- Search for “Depicter” then click Install and Activate.
Here is a video showing the whole process:
Step 2: Prepare Your Call to Action Element
Our setup is simple. On the homepage of our website, we place a button. When users click this button, our video popup should open.
To make this happen, we simply assign a CSS selector—either an ID or a class—to the button.
Since the page was built using Elementor, we are creating an Elementor video popup (though the process is the same with any Page Builder). After opening the Elementor editor, open the Advanced tab, and enter a custom class name, let’s say “openpopup” in the CSS Classes field.
That’s all there is to it! We save the changes, and the button is now ready to trigger the popup.
Step 3: Create Your Video Popup with Depicter
After opening the Depicter dashboard, go to the Popup section.
Although Depicter offers over 600 ready-to-use templates that make the process quick and easy, in this case, we want to build a simple popup from scratch. So, click on Create Blank Popup.
Once inside the Depicter editor, click on the Videos tab in the left panel and add the YouTube element.
Note that for embedded videos, we can also use Vimeo, or even upload our own video directly to the website. For this tutorial, we’re using a YouTube video.
After adding the video element, paste the video URL into the Embed Video URL field in the right-hand panel.
Next, to make a full-screen popup video player, we right-click on the video and select Set as step background.
Now, let’s set up the Display Rules so that the popup opens when the user clicks a button with the CSS class we defined earlier.
To do this, we click on Publish, then select Configure under the Display Rules section.
In the Triggers tab, activate the Click option and enter the same CSS class we used earlier, starting with a dot (.) to indicate it’s a class selector.
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”)
Finally, save the changes, and we’re done!
Now, when a user clicks the button on our page, the video popup opens and the video starts playing.
That’s it! This quick tutorial showed you how to create a video popup in just a few easy steps.
If you’d like to get even more out of the Depicter Popup Builder, make sure to check out the posts below for more simple, powerful tutorials like this one.
