what is unbounce
CATEGORY
DID YOU KNOW WE HAVE A PODCAST?

Become a Better Marketer. Anytime, Anywhere.

Listen and learn on the go with Unbounce’s Call to Action marketing podcast. Tune in and get inspired in the car, while you cook, or at the gym.

Do Video Backgrounds Help or Hurt Conversions?

gold bars
Not everything that glitters is gold. Only by testing can you know for sure if you’ve hit the jackpot. Image via Shutterstock.

So far, video backgrounds have been implemented fairly successfully on websites (they add a certain cool-factor, right?), but there is some debate over whether or not they should be used on landing pages. While video backgrounds may look beautiful, initial research reveals that they could prove too distracting for some landing pages, and could contribute to lower conversion rates.

As is the case with most new innovations in web design, it can be tempting to use this new technology without a clear understanding on how it affects conversion.

Nonetheless, marketers love video backgrounds: they are modern, appeal to the inner design ego in all of us and have already been hailed as one of the biggest design trends of 2016. Trendy marketers have made it clear that they definitely want to use them on landing pages.

In fact, when Unbounce released video backgrounds as a built in feature, it become one of the most popular discussions in our community. Ever. And, when we opened it up for beta testing, we got some pretty enthusiastic responses.

Like Jon here…

jon

And David…

david

And, of course, Gary…

gary

And, Dave…?

dave t

So, video backgrounds on a website? Go for it. But video backgrounds on a landing page? Not so fast.

Not so fast
Image via Giphy.

Here’s why: Video backgrounds can make pages load slower and distract visitors from your Call to Action (CTA). And since every great landing page has only one end goal (conversions), it begs the question: Should we nix the idea of using video background altogether?

Well, not entirely.

Like anything else you implement on a landing page, you’re going to want to test that puppy out thoroughly to see what effect (if any) it has on conversion rates.

Here at Unbounce, we’ve been testing out the use of video backgrounds on landing pages. Based on our results, we’ve come up with some guidelines outlining when to use a video background versus a static hero image and best practices for applying a video background.

When should you use a video background on a landing page?

I looped in Unbounce’s senior conversion expert, Michael Aagaard, to explain how using a video background on landing pages has worked for us:

We’ve been experimenting with video backgrounds for a while now. What we see is a tendency for video backgrounds to work well on landing pages where the goal is to communicate a certain “vibe” or “feeling.

In other words, video backgrounds could work well on landing pages that promote a unique atmosphere, like a conference, performing arts event or restaurant.

Video backgrounds can help demonstrate a hard-to-describe experience or atmosphere.

When shouldn’t you use a video background on a landing page?

Aagaard explains that video backgrounds could have an adverse effect on landing pages when there’s a complex sales offer at stake. When that’s the case, he recommends concentrating on the landing page copy to convince users to convert:

With more complex offers where you need to read a lot of copy in the first screenful, video backgrounds can be a bit distracting.

Copy has a direct and measurable effect on landing page conversions. If your offer requires a lot of explaining, use your words rather than running the risk of distracting visitors with video.

The Unbounce house rules for using video backgrounds

Landing pages are different from websites, and thus deserve their own set of laws for applying video backgrounds. Here’s our (not-yet-foolproof) list of ground rules for using video backgrounds on a landing page. Is this a comprehensive, complete, end-all, be-all list? Of course not! Join the dialogue and add your own rules and/or lessons learned in the comments below.

1. Avoid major distractions

Keep the conversion goal front and center. The video background content should always support the overall goal of the page. ConversionXL founder Peep Laja has a similar opinion:

Video that doesn’t add value works against the conversion goal.

Essentially, video backgrounds shouldn’t distract visitors from the primary goal of the page — rather, they should supplement or enhance the CTA.

The video background on this landing page enhances the CTA without distracting visitors.

2. Contrast is essential

In most cases, you’ll want to have some text layered on top of the video background — make sure it’s legible and easy to read throughout the entire video loop. Generally, aim for a strong light/dark contrast between the video background and the copy.

One way to ensure full, legible contrast is by applying a solid, monochromatic filter on top of the video. Not only does this look super professional, but also the color contrast makes the text, form and CTA on the landing page really pop.

The monochromatic filter applied on top of this video background makes the text and CTA really pop. BTW, like this ^? Log into Unbounce to use this brand spankin’ new template.

3. Short loop

A 5-10 second video loop should be enough time to get the point across without sacrificing quick load time.

Keep in mind that a background video will be playing on a constant loop. If the video is too short, the loop will appear disjointed or incomplete. On the other hand, if the video is too long, the viewer may click away from the website, or onto another page before the video has had a chance to work its magic in eliciting the desired emotional response.

Look for (or produce) a simple looping background that is relevant to the content of your landing page.
There are many libraries of stock video clips online (here’s a pretty good roundup). If you can’t produce your own footage, make sure to double-check the copyrights associated with any video before you use it.

4. Mute the audio

One of the biggest pet peeves of net users everywhere is unsolicited audio when landing on a page. Don’t let your landing page be that landing page.

The general rule of thumb is that sound should always be muted (on all Unbounce pages, audio is turned off by default). If, for some reason, you need to add sound to your video background, don’t autoplay the video with sound — let viewers press play when they’re ready.

5. Remove visual controls

As long as the video content is relevant and the quality sufficient, there should be no reason for landing page visitors to press play or pause.

#alwaysbetesting

So, if you follow all of our House Rules, placing a video in the background of your landing page should increase conversion, right? Or, at the very least, it won’t actually hurt conversion… right?

Well, maybe.

Video backgrounds are still in the early days of their inception and, like any good data-driven marketer, you’re going to want to take it for a test drive before committing fully.

A/B testing is both an art and a science. It’s also very unpredictable. Most marketing departments, usability specialists, designers and management rely on a mixture of experience, gut instinct and personal opinion when it comes to deciding what makes a delightful marketing experience for their customers.

We recommend running an A/B test to compare how your page performs with a video background compared to a static image. Start by segmenting a small portion of traffic towards the page — just to be safe.

At the end of the day, it’s your customers and your brand that will decide what converts best.

About Maggie Crowley
Maggie Crowley is Unbounce's Marketing Educator. With a heavy background in SaaS growth marketing, Maggie's primary role is creating tools and content to help marketers #dobetter online. Outside of the office, you can find her on the soccer pitch, rippin' up the bocce court or whipping up some southern soul food. Tweet her: @crowleymaggie
» More blog posts by
  • You have to manage the expectation of the user from the moment of contact.It’s imperative they expect the “new and shiny” to be in front of them once they get to the landing page.

    If you are using copy/ad text that doesn’t excite and lead the person to want to experience whatever it is you are selling them, the best video in the world will fall flat.

    I think the concentration of what to do when they are on the page already is a good thing, but too many times it is forgotten that there is an upfunnel to just about anything and you can optimize that contact to get the person primed for video.

    Just my opinion of course :)

    • Maggie Crowley

      Hi Shawn, thanks for your note!

      Agreed – matching the landing page copy with the right intent of viewers is key. Video can’t replace great copywriting – that remains an integral part of any landing page.

  • Thanks for great article and info.
    I noticed many of our users and designers use the Embed code directly from Vimeo to play the video in the background.
    Since its important to remember while using a video background from other sources is to check for the license of the video (Royalty free or Creative common), Finding Footage offers stock video searching platform with +300 free clips collection. (Royalty Free) http://www.FindingFootage.com

  • I LOVE this post! I can’t tell you how many times people tell me they need a video background, just for the sake of something cool.

    I think it is imperative that companies do as you suggest, and use them only when promoting something with a unique atmosphere or experience, where video does a better job showcasing than text would. But I see companies all the time trying to add a video background for products, services, or OPPORTUNITIES (all the time!) that are not experience related, in hopes that they can try to “get someone in the mindset” to take action.

    I’ve found this does not work at all. Video is only helpful if it visually demonstrates the offer, not if it tries to visualize some mindset.

    Great post!!

    • Maggie Crowley

      Chris, thank you for the kudos! And, thanks for sharing your experience. I really appreciate that :D

  • I understand the concepts in your post but sometimes “best practice” is so formulaic that it is impossible to convey any sense of differentiation.

    I feel sometimes that if you are trying to convey a difference in your product or service you have to be different right from the outset of the conversation.

    There are risks inherent in this approach but the alternative is to look like everyone else with your “hero shot” and your benefits and your customer logos all lined up :-)

    • Maggie Crowley

      Stuart, I completely agree. In fact, it’s something I took into account pretty seriously when writing this article. At a really high level, these guidelines are meant to help marketers avoid some of the more common sloppy errors I came across when researching for this post. If I had to boil all 5 tips into one it’d be this: “Use a high-quality video that supports the main CTA.”

      Thanks for your input! I really appreciate it :D

      -Maggie

  • What a data of un-ambiguity and preserveness of valuable know-how regarding unexpected
    emotions.

  • Exciting news! That’s definitely a feature we were waiting for!

    We love background videos so much that we’ve built http://www.coverr.co as a side project to allow every designer or marketer get a beautiful cover video for their landing page.

    Can’t wait to try it out together!

    • Maggie Crowley

      Hi Nuriel, just checked out Coverr – very cool! Thanks for your note :D

      Maggie

  • Share the results of your A/B-tests! I am eager to get the empirical confirmation of an obvious theoretical prediction that these idiotic video backgrounds *always* hurt conversions.

    • Ali

      I’ve also seen many websites using background videos in the hero area to improve conversions I’m not sure if it works well or not. I’d love to see the A/B testing results. :)

  • J. X. Rodriguez

    I have been using animated home and landing pages for several years. Some recommendations:
    1. Consider the wide variety of bandwidth available to different viewers. You usually need to throw something in front of the animation in case the connection is slow or congested. Ideally it will fit in seamlessly with the subsequent full animation which supersedes it.
    2. Don’t confuse the viewer. They have probably come to your page with some intention in mind other than witnessing your artistry.
    3. Don’t overload.
    4. The finished, aggregate display should be technologically simple and have fallback layers should some element fail (such as a feed from another site).

    • Maggie Crowley

      J.X., thank you for your note – I especially agree with #2 & #4!! Have a great weekend :D

      Maggie

  • As a video-background user myself I had one major issue using HTML 5 videos: Internet Explorer. This browser simply does not support video backgrounds (unless workarounds with flash and similar ugly solutions).

  • I guess background video do help in conversation.

  • I don’t know but I think video background do help.

  • Arden

    Hello,

    Nice article. This article has well explained the ways of including video backgrounds on the landing page. I agree with you that the video backgrounds should support the overall goal of the page. I liked the third point of this article, which is a short loop. It’s true, if the video is too long, viewers may click away from the website. Placing a video on your landing page may increase your conversion rates. The ultimate aim of every business is customer engagement. Videos are an effective ways to engage your customers with your brand and evoke a positive response from their side. I would like to share a link with you. The link shares “Seven examples of brands using online videos to increase sales”. Here it is: https://www.animatedvideo.com/blog/brands-using-online-video-increase-sales/

    I am sure You will like it!

  • thanks a bunch for writing about Coverr and for mentioning us alongside such great tools.

  • I believe this website contains very wonderful written content articles.
    Thanks admin.
    Bitdefender Antivirus 2017