How to Create an Unforgettable Homepage with Background Video

If someone lands on your homepage, you want them to stick around for a minute. Scroll past the hero section and learn more about you and your business, click over to your portfolio or your blog, and maybe even sign up for your email.

The best way to encourage visitors to spend more time on your homepage is to add a video background that grabs their attention.

Here are six tips for getting an attention-grabbing, scroll-stopping video background to improve your homepage:

1. Choose a high-quality video
2. Stay relevant to your brand
3. Follow SEO best practices
4. Make sure your text contrasts
5. Run some A/B tests
6. Use free videos

Before we get into these tips, let’s go over why you’d want to use a background video for your homepage in the first place.

Why should you use background video on your homepage?

Your homepage is an important part of your website, and you need to maximize the information you’re conveying to your audience. You need to tell any visitor who you are, what you do, and why someone should contact you. That’s a lot to express in text and static images.

Using a video background to emphasize your brand story or highlight your solution is a great way to use your homepage space effectively, without overwhelming your audience.

This isn’t the only benefit: Websites with videos perform better. Users spend up to 88% more time on pages with videos, and adding a video to a landing page can increase conversions drastically. In fact, websites have seen conversion rates increased by 138% by adding a video.

In order to get results like these, though, it’s important to choose the right video and to use it effectively on your site. Let’s jump into how to do that now.

How to use background video to improve your homepage

Here are six tips for using background video effectively on your homepage, so that it not only looks great for you and your audience, but converts and performs for your business.

1. Choose a high-quality video

The best way to ensure that your video background engages your visitors—and encourages them to stick around or sign up—is to make sure that it’s the best quality possible.

Size and file format are key. It’s ideal to use HTML 5 and to keep the file size under 2MB. If you need to shrink the file size of the video, consider shortening it.

If you still need to, use a video overlay after compressing the file. This is not only really common and will help with branding—which we’ll talk about next—but it can hide some of the degradation and keep your video looking top-quality.

Here are a few more best practices to keep in mind:

• Skip audio. If it’s automatic, it’s jarring. If it’s a choice, most people are going to skip it, anyway.
• Check on mobile. Mobile traffic has been increasing for years, so you want to make sure it looks good and properly formatted for people looking at your website on their phones, too.
• Keep it short—just not too short. You don’t want the video to go on playing for too long, but you also don’t want a gif-like background. That gets annoying to look at really quickly. Try to stick to 30 seconds or so.
• Start and end on the same frame. This helps make the experience continuous.

2. Stay relevant to your brand

When you’re choosing your homepage, you should consider your brand right after quality. Does the video convey the right message? Does it fit your brand guidelines? Does it highlight your brand as an authority in your industry?

Sometimes this will be easy. For example, if your freelance photography business focuses on weddings and family portraits, a video background of a snow-covered mountain at blue hour wouldn’t be right. But if you were a ski instructor, that might be a perfect fit.

Other times, it might be harder to make a call. Does the video reflect your values? Would you clients expect this video from you? Is there brand alignment with your design standards or color palette?

Brand alignment is important to consider here, but remember that it’s also something you can change. Video overlays are great options for video backgrounds, and you can think about other ways you can adjust the video background to make it better fit your brand, too.

Check out this example from Greengage Digital, making use of this Pexels video.

This homepage features a stock video of a meeting, which is great—it highlights this consulting business’s investment in collaboration.

What I love about this video is that Greengage Digital made sure their brand accent color matched the screens in this frame. This coordinates with the chat icon and the CTA button in the top right corner, which makes for a cohesive brand experience.

3. Follow SEO best practices

Search engine optimization, or SEO, is important for any great website. You want to make sure that you’re sending all the right signals to Google to let them know that your page is authoritative and informative, because you want to make it easy for people to find your site. Plus, for most startups, SEO is the most important marketing channel for growing the business.

Well, SEO is important for videos on your website, too.

First, make sure you’re following the right recommended specs and files so that your page load speed isn’t affected. (If you’re not sure about yours, you can easily check with Google’s Page Speed Insights.)

Next, be sure to provide more information in the meta data, including the alt text. Alt text is an HTML field that search engines crawl to determine the content of the video and when or how to index the video. It’s also the text description that people using screen readers will get—and we’ll talk more about accessibility next.

To write an effective alt text, include a brief but accurate description of the content of the video, as well as any keywords that you’re targeting. That’s right, your background video can help your Google ranking if you’re following video SEO best practices.

4. Make sure your text contrasts

Video backgrounds on your homepage are great for maximizing space. You can use these to convey more information and more feeling than a static image or block of text, and you can still include your headline and your CTA in the hero section. Win-win.

But when you’re including text over a video background that’s a different color than your page background, you need to make sure the text contrasts enough to make it accessible.

Many people aren’t able to read text that appears against a background without sufficient contrast. The degree of difference between colors is based on the perception of brightness of each color, and it’s called the contrast ratio. Here’s an example of text with an insufficient contrast ratio:

The light against the white isn’t easy to read, so this wouldn’t be accessible on a website and you’d need to correct it.

When you’re setting up your homepage video, be sure to check your contrast ratio. You can do this quickly with a free tool like Who Can Use.

5. Run some A/B tests

Before you commit to a video background—or any changes to your homepage, for that matter—make sure to run an A/B test.

An A/B test is a common user experience research experiment to determine which website or product design works better by serving one variant to one-half of visitors and another variant to the other half. These experiments are most effective when there’s one variant between the versions. So think testing two different calls to action on a landing page, or two different colors of your navigation bar.

When you’re adding a video background, you’ll want to run an A/B test first to make sure that it performs better. (Based on the standards, it’s more than likely, but it’s always better to test and be certain.)

Once you’ve confirmed that adding a video background works for your audience, you can A/B test other details—the color of the video overlay, the text size, the text spacing, even the video itself—to keep improving your website performance.

6. Use free videos

Making high-quality videos that are specific to your product or offering is great. But that can be expensive, and it’s just not an option for everyone.

While using your phone works, the right camera that gets a better video is usually costly. Similarly, you can get started on tons of great editing apps for free, but free trials have limited features or only last so long.

Your best bet is to use free stock videos from a resource like Pexels to get an excellent quality background for your homepage. Check the licensing details to confirm you can make adjustments, and you can still customize by adding your brand color or cropping the frame. Plus, if you’re using free photos you can keep A/B testing different videos until your website takes off with the perfect combination.

Time to revamp your homepage with background videos

Videos work on websites, that’s the bottom line. They grab our attention right away, and they convey so much more information than copy or photos. The key is choosing the right video background.

If you follow these tips, you can get started with a video background that works for your brand and actually improves your website performance—and grows your business.

Cover photo by Ketut Subiyanto.