Top 5 Considerations for Integrating Background Video into Your Website

June 08, 2016

screen1-5
icon-expand icon-expand

Background video is one way to elevate the look of your site, but like many design elements, you need to be sure it’s executed correctly. Here are 5 considerations for making video an element of interest, not annoyance!

Top 5 Considerations for Integrating Background Video into Your Website

It’s no secret that background video has jumped into the web design scene and is here to stay. In fact, we integrated video elements into our own website relaunch. Since this is a fairly new trend and more B2B websites are looking to integrate background video into their websites, we wanted to provide some tips on how to integrate a moving background the right way. 

First, Weigh the Costs and Benefits
Every design element has a cost-benefit ratio that needs to be weighed and background videos are no different. Just because “everyone’s doing it” doesn’t mean a fad will test well with actual users. That’s true of any web trend, so a healthy dose of reality is necessary when deciding which trendy elements are appropriate for your audience. 

After conducting usability tests on several websites with background videos, we’ve learned this: moving backgrounds are polarizing. Some people think they add value and others hate them. I don’t use the word hate lightly here! So, if you’re looking to jump on this trend, there are a few things to consider. 

1. Subtle Movement 
Subtle movement in the video is key. Think Airbnb.com. Lately, their videos have a little more action, but the first videos they integrated were mostly still until there was subtle movement that was a pleasant surprise - pleasant being the key word here. The video should enhance the experience on your website, not detract users from accomplishing the task they set out to do.

2. Relevant Content 
Content is also important. The video should be adding value and helping the visitor to better understand your company brand and the space you are in. These should be closely linked, otherwise, your visitors will see through your attempt to integrate the latest trend without fully thinking it through. We highly recommend shooting original video to best showcase who you are and what you do. 

3. Allow Users to Opt Out
Since many of your users will react negatively to your video, providing a pause button will enable people to continue engaging with your website without being too bothered. For visitors with slow connection speeds, have a backup still photograph ready to serve up. Don’t underestimate how negatively a background video can impact your visitor. 

4. Be Cognizant of Size 
As with any large-format hero banner, still or video, size is a key consideration to keep in mind. If your image or video fills the entire screen, you should not expect people to scroll past it (even with a little arrow). Make sure you have white space and text copy or other additional elements leading the user down the page on ALL screen sizes (all the way down to mobile). Otherwise, you’ll create a “false floor.” 

5. Quality Counts
This one goes along the lines of content relevance, but the quality of your video makes a difference. If it’s grainy and jumpy, it will reflect poorly on you even if the visitor’s internet connection is to blame. As mentioned previously, we highly recommend shooting your own video to ensure both the highest relevance and best quality possible. You only get one first impression!

Interested in integrating background video into your website? Get in touch, we’d love to talk!

Shay Ruggles

As Director of UX of 9thWonder Shay Ruggles ensures 9thWonder is creating compelling user experiences that balance user intent, client goals and site performance.

Latest Blogs

icon blog-grid

Information Architecture (IA): The Unsung Hero of User Experience

Read Post
Read post
icon blog-grid

What's in a Name? One Way to Look at Organizing Your Brand Messaging Structure

Read Post
Read post

Let's Get Friendly!

Get In Touch