How to Integrate the Perfect Video Background for Your Landing Page

Smartphones and computers today have higher screen resolutions and faster connection speeds. The rule of thumb to avoid videos on your website is long gone and replaced with the many advantages of animated elements.

In a recent state of video marketing survey, Wyzowl asked respondents about video marketing. The results show a 41% increase in video as a marketing strategy between 2016 and now. The study looked at all types of videos, including explainer videos and informational social media clips. However, using video as your background is also a powerful way to move users to the next stage of the buyer’s journey.

You’ve likely seen videos as backgrounds on sites you’ve visited. You can integrate them in a variety of ways. We’re going to look at some examples and talk about the best way to utilize them on your pages for maximum impact.

1. Choose a Video Type

Your first step in adding a video background is choosing the type of video you want for your background. You can highlight products, processes, employees, history or use it to explain what you do in pictures.

 

Mango Languages uses a video showing people on vacation in unique places. They are laughing, smiling and participating in local culture. The video footage focuses on the result of using their service, which works well with something like a language program.

2. Keep It Short

Different experts cite different video lengths for maximum impact. For a video background landing page, though, you have just a few seconds to grab their attention. Keep the footage short and relevant to the page’s goal.

3. Fade the Vibrancy

Too many colors and shifting views can distract from the headline and CTA overlaid on top of your video. One thing you can do is to fade the image a little by adding a solid overlay and making it transparent.

The video still plays and makes an impact, but it doesn’t take over the entire page. You can still draw user attention to the most vital elements on the site.

Hennemuth Metal Fabricators shows some of their equipment and process in their background video. The machinery colors are vivid blues and yellows, which would detract from the text on the page.

They slightly fade out the colors, giving everything a soft gray tone but still allowing some colors to come through more subtly. The result is a CTA that pops and text that grabs the user from the minute they land on the page.

4. Optimize the Size

Video files can sometimes get big, and even with faster connection speeds, they bog down the system. For the internet, go with a lower quality video to optimize load times and drain on resources.

Most video editing programs allow you to export your video in a variety of formats. You may want to use a third-party streaming service such as YouTube and embed the file, too.

5. Choose Contrasting Colors

No matter what overlays you use or how hard you try, colors will creep into your background video. If you want your text to stand out, you must choose contrasting colors. You may have to think outside the box of what your typical color palette looks like and add an unusual choice.

A professional designer can tell you what shades contrast best. Take a step back and see if the text grabs your attention. You can always adjust the colors of your buttons and type, but you probably don’t want to reshoot your video.

Squatty Potty uses a video in their hero background, but it does not autoplay. The user sees an image and text and then can click on the video to watch how the product works. You’ll have to decide based on your user demographics if a background video should autoplay, or you should let the user hit the button to start the footage.  

6. Adopt the Right Tone

The images you choose for your video background should present your product or service in a positive light. Do you want to give off a fun and young vibe? The images must match your overall tone of your page. Before shooting any film for your website, think through the message you want the video to send and how well it aligns with the rest of your message.

7. Allow for Whitespace

A background video often fills every available space above the fold of your page, barring the navigational menu. Thus, it must become the whitespace on your page, grabbing attention and then fading into the background to focus on other elements.

It’s best to leave some negative background space around your text and CTAs. Don’t add a video and then have so much text the user gets a headache trying to read it all. Instead, limit the number of items you place on and around the video

Phantom Hire streams video of their luxury rental cars in the background. They limit the layered elements to a headline, subheading and four menu choices. Note the plentiful spacing, so the eye goes to the headline first.

They use a bright white font color for some contrast. Even the logo is in the same hue.

Test Performance

Try different methods, placement, headings and buttons and conduct A/B tests to see what works best for your users. You may find you need to tweak your background video from time to time as your customer base changes or you offer new products.

Each landing page may also benefit from varied videos. If something isn’t working, try a different clip or add some additional text to see your audience’s response.