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

Internet users spend almost 50% of their time watching videos according to Zenith’s last report about media consumption. The same report highlights that online video viewing grew by 91% between 2015 and 2017.

A screenshot of Zenith’s last report about media consumption.

A lot of businesses jumped on the bandwagon and started producing video content. The percentage of marketers that say they’re using video as a marketing tool increased from 63% to 87% in two years.

Share of marketers using video as a marketing (2017-2019)

Source: Wyzowl

Producing video content is one thing. Getting your users to actually watch it is another thing entirely…considering that 3% of the top creators generate 90% of the views on YouTube (source). So once your videos are ready, you need some ways to get your target to watch them.

But fear not; there are a couple of ways to get your video in front of an audience.

The easiest one? Video popups.

In this article, we’ll explain step by step how to create video modals that drive views, from the selection of your hosting platform to the settings of your video to the design of the overlay itself to your popup timing.

Step 1: Find the Right Platform

Before creating the popup itself, you need to host it.

How do you choose the right platform?

For video popups, it all comes down to the customization options. Does the platform allow you to remove ads? To hide suggestions at the end of the video? To customize the player? To add calls-to-action at the end of the video?

Let’s look at three of the most popular video hosting platforms and how they compare: YouTube, Vimeo, and Wystia.

YouTube

Yes, it’s free. Yes, videos load instantly. Yes, your viewers are already using YouTube.

But the platform is probably not the best choice–at least for businesses.

Why not?

Because YouTube’s primary objective is to display ads and drive people back to their website. As a result, it can prove difficult to remove ads or suggestions at the end of the video.

It’s no wonder it’s rated as one of the hardest platforms to do business with.

Vimeo

Vimeo is definitely a more elegant solution for your pop-ups.

They don’t suggest other videos to watch at the end of your videos and they don’t display ads. Their pricing is pretty affordable, too.

Plus, their player looks very nice, especially in a popup.

Wistia

Wistia is the most business-friendly tool of the three.

Built with SMBs in mind, it offers a few options that will make your life easier:

  • The player is easy to customize
  • It lets you redirect viewers or collect emails at the end of the video
  • It provides advanced stats about your viewers

All in all, if you can afford the price ($99/month for the pro version), Wistia is probably an even better option than Vimeo.

Step 2: Adjust Your Video Settings

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

Size

Let’s talk first about the size of your video.

What size should you choose for the video you’ll embed in the popup?

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:

A video popup viewed on a 1280 x 800 pixels screen

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

A video popup viewed on a 1920 x 1080 pixels screen

 

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+

A video pop-up displayed on a mobile device

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

A video pop-up displayed on an iPhone 6S phone

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.

Still, the question remains for desktops. A recent update in browsers will help you make a decision: most navigators now mute the videos when autoplay is activated.

In other words, it’s fine to activate autoplay if your video can be viewed without the sound, but it’s a no go if your viewers need the audio to fully enjoy your video content.

Hide Recommendations (YouTube only)

If you decided to go with YouTube to host your video, don’t forget to 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.

A screenshot of Codegena's YouTube Embed Code Generator

Source: Codegena YouTube Embed Code Generator

Step 3: Find the Right Timing

While finding the right timing for a pop-up can be pretty difficult, deciding when to display your video pop-up is usually easy.

If you think your video will speak to all of your visitors, 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:

A video popup created to celebrate Mother's Day displayed on Exito.com

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 popup before their visitors leave their website to promote their video series and collect the visitor’s email address.

Humanity & Inclusion's exit video popup

Step 4: Adjust Your Frequency Settings

This might seem obvious. But make sure that your popup doesn’t appear on every page or every time your visitor comes to your website. It would be the best way to put them off.

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.

A video pop-up's frequency settings in Wisepops

For example, this video popup is set to appear every 5 days and will display 3 times max.

Step 5: 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 can be uncomfortable for your visitors.

That’s why we recommend using a lightbox effect that will dim the background and help your visitors focus on the video.

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

Buildbox's lightbox video modal

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.

Justrun.ca's video pop-up featuring a large closing X

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 an example from Comet Meetings’ website. They included their logo, some brand patterns, and reused their company’s family font.

A video overlay on Comet Meetings' website

Step 6: Create a Mobile Version

If you thought that creating a mobile video popup was as easy as making sure it’s responsive, what will come next will be a disappointment for you…

In 2016, Google shared a set of rules for mobile interstitials. In short, you now have three options to comply with these guidelines:

  • Display your popup on the second page the user views on your website (to avoid displaying it on the landing page)
  • Make the popup smaller so that it doesn’t take more than 30% of the screen height, and deactivate lightbox effects
  • Use a call-to-action displayed in a corner of your website to trigger the popup (and adapt the size of the popup itself to smaller screens)

Wrap-Up

And we’re done!

We’ve covered the 6 essential steps involved in the creation of a video interstitial.

Now it’s time to create your own pop-up!

Any questions? Leave a comment below.