How to Create an Eye-Catching Video Popup (No Coding Required)

People spend almost 50% of their online time watching videos, so we marketing folks also use them a lot. But getting people to actually watch them is not easy…

One of the best ways to do that:

Video popups.

In this post, we’ll explain how to create engaging video popups according to the latest UX requirements.

In this post:

• What is video popup?

• How to make video popups

What is a video popup?

A video popup is a popup window that contains a video that can be watched without leaving the website. In this sense, a video popup becomes “an onsite video player.” Video popups are great for promoting new products, driving traffic to web pages, and other marketing goals.

How to Create a Video Popup

Here’s how to make a video popup:

1. Find a platform to host your video

2. Add a video to your popup

3. Adjust video display settings

4. Find the right timing

5. Set video frequency

6. Customize the popup design

7. Create a mobile version of your campaign

Before we begin—

Let's get a popup app.

We'll use Wisepops in this tutorial—it's a top-rated (4.9 stars on Shopify and 5 stars as the WordPress plugin) one and includes video popups.

No cc needed, unlimited free trial.

"Easy to use, friendly support, and great performance! We've seen a significant boost in conversions since installing!"

Goddess Provisions, a Shopify user

Or see examples of campaigns made with Wisepops.

Free popup templates

Get a head start on designing video popups. Browse our library of designer-made templates:

➡️ Go to templates

Step 1: Find a video hosting platform

Before creating the video popup itself, you need to host it. Here are the best options you can check out.

• YouTube. Yes, your viewers are already using YouTube, so it’s a great one to choose. But know YouTube’s primary goal is to display ads, so it can be difficult to remove ads or suggestions at the end of the video.

• Vimeo. Vimeo is definitely a more elegant solution for your videos. They don’t suggest other videos to watch at the end of your videos and they don’t display ads. You can add three videos for free + their pricing is pretty affordable, too.

• Wistia is the most business-friendly tool of the three platforms. Built with SMBs in mind, it offers a few options that will make your life easier: a simple player, links to other videos, and advanced stats. All in all, if you can afford the price ($99/month for the pro version), Wistia is probably an even better option than Vimeo.

Note: If you'd like to make marketing videos for popups by yourself, consider PlayPlay. It has hundreds of templates, a simple editor, and lots of customization options.

Step 2: Add a video to your popup

Once you're in Wisepops editor, go to Blocks in the main menu and choose Video:

Next, add the URL of the video in the main menu:

Step 3: Adjust video settings

Once your video is up, it’s time to adjust its settings before you embed it in your popup.

Size

We’ll start with the ideal size for desktops.

In North America, 93% of the screens have a resolution greater than or equal to 1280 x 800 (that’s the size of a Macbook Air’s screen). So we’ll take this value as a reference.

As a rule of thumb, we consider that a popup video should take at least 50% of the screen–if it takes more, it’s too intrusive for the visitor. If it takes less, it might be too small on large screens. So for a desktop popup, with the 1280 x 800 resolution in mind, your video’s width should be:

1280 / 2 = 640 pixels. With a 16/9 ratio, your video’s height will be 376 pixels.

With these settings, here’s what the video will look like on a 1280 x 800 screen:

And on a 1920 x 1080 screen (the second most popular screen resolution):

To adjust the size of your video popup in Wisepops:

Click on the video in the popup and choose Size in the small menu above:

We’ll use the same methodology for mobile devices.

In North America, 99% of the screens are larger than 320 x 569. On mobile, it’s OK to take a larger share of the screen, so instead of 50%, we’ll take 90% of the screen’s width. We end up with a size of 288 pixels x 169 pixels.

This is what a video with these settings looks like on a Samsung S9+:

And this is what the same video looks like on an older phone, the iPhone 6:

✅ Autoplay

Autoplay or not autoplay, that’s the question.

Fortunately, you don’t have to answer that question for mobile devices. Autoplay simply doesn’t work on phones and tablets. So if you’re designing a mobile video popup, don’t be surprised if the video doesn’t start automatically.

✅ Hide video recommendations (YouTube only)

If you decided to go with YouTube to host your video, you can deactivate recommendations at the end of the video. They could drive your visitors away from your website once the video is over.

To save some time, we recommend this tool that lets you adjust this kind of settings without having to edit YouTube embed code manually

Step 4: Find the right popup timing

If finding the right timing for a pop-up is difficult for you, then feel free to display it on landing (that’s what most of our customers do).

Let’s take this example from Exito, the leading online retailer in Columbia. Their marketing team produced a video ad for Mother’s Day. To maximize views, they displayed it to all visitors landing on their homepage on the said day:

If your video will speak only to a limited audience, or if you think that your priority is for visitors to visit your website and then see the video, you can choose to display it on exit.

This is what the NGO Humanity & Inclusion is doing.

They’re displaying this video popup before visitors leave their website to promote a video series and collect email addresses.

Step 5: Adjust video frequency settings

We recommend that you display only once per visitor instead, or if you want it to appear more than once, make sure to space out displays over time.

For example, in Wisepops, you can set your frequency like that: every five days and three times to every visitor.

Step 6: Customize the design

Let’s talk about the design of your video pop-up itself now.

Recommendation #1: Use an overlay

Watching a video on top of a website might be more comfortable with a lightbox popup effect that dims the background and help your visitors focus on the video popup.

Here’s a good video popup example from Builbox. The opacity of the overlay makes it easier for visitors to watch the video:

To add the lightbox effect in Wisepops—

Go to Design > Style and click Use overlay:

Recommendation #2: Add user-friendly closing options

Not all your visitors will appreciate getting welcomed with a modal. Make sure to include visible and easy-to-click closing options.

Here’s a good example on Justrun.ca. They added a large closing X in the upper right corner.

Recommendation #3: Use your website colors and fonts

Some websites use video pop-ups to display ads. That’s the sad truth.

To help your visitors recognize that the video was produced by your company and is not a third-party ad, one of the best strategies is to design a lightbox that matches your brand colors and font family.

Here’s a video popup example from Comet Meetings. They included their logo, some brand patterns, and reused their company’s family font.

Step 7: Create a mobile version of your video popup

Google has a set of rules for mobile interstitials.

In short, you have three options to comply with these guidelines:

• Display your popup on the second page the user views on your website

• Make the popup smaller so that it doesn’t take more than 30% of the screen height

• Use a call-to-action displayed in a corner of your website to trigger the popup (called a sticky tab)

With that in min—

To make a mobile version of your video popup:

• Duplicate your desktop campaign using the three dots in the far right column in the dash

• Open the duplicate popup

• In the main menu, click "Display rules" and go to "Audience"

• Select "Display on mobiles"

Video popups: wrap-up

And we’re done!

We’ve covered the seven essential steps involved in the creation of a video popup.

Now it’s time to create your own!

These step-by-step guides will help with adding popups on specific website platforms:

• How to add popups on Wix

• How to add a popup to a Shopify store

• How to add a popup on WooCommerce