When to use a Fullscreen Background Marketing Video for your Website
When our clients ask about using video as a background for their websites, I tell them that if the video contributes to their overall message, it can be useful to communicate a lot of information quickly.
For B2C, a video background can be a powerful medium for telling stories, displaying a product in action and setting tone toward establishing brand identity. But does your B2B website need it? What are the downsides? How does it fit into the mobile-first climate? And for the builders and tinkerers out there, how is this effect best achieved?
Consider your audience:
A key goal for your B2B website design is for users to easily understand your company and product or service and to engage as efficiently as possible. A traditional visual hierarchy that leads to a predictable eye path through your website can be disrupted by background video that competes with important elements on your page. That’s why, like other B2B users, I often find background videos to be distracting and to work better for consumer-facing products.
{{cta(‘709b3388-bb90-4fc5-bf31-adce29253b27’)}}
Though it’s more challenging to find great examples of B2B companies using background video effectively, Sprint’s Business website and CSC’s website each provide insight into their team and process. Zendesk uses color and subtle humor to bring the company’s value proposition to life. CSC’s background video also uses background video nicely to establish tone; it conveys a sense of professionalism, collaboration and competence. AdeptSource, an IT staffing firm that uses background video effectively for setting tone, fits imagery with copy; “a sea of potential candidates,” a visual pun that conveys relaxation and ease, which fits with their value proposition of taking work off the hands of hiring managers and recruiters seeking IT talent.
In short, when deciding on your website design, it’s important to consider your target demographic and whether they will be receptive to this mode of communication. If you decide that background video fits with your brand and is appropriate for your audience, the best practices listed below are critical to follow in order to do it right.
Keep load time snappy:
One of the primary imperatives of web design is speed — there is plenty of evidence suggesting that a few milliseconds of delay can have an adverse effect on your bounce rate. Here are a few best practices that help to keep your load time snappy.
- Video length: The ideal video length is between 15 and 30 seconds. Too short, and visitors who stick around for longer than a minute will feel the site to be repetitive. Too long, and your site will load too slowly.
- Video compression: Keep your video size under 5mb at all costs. Ideally, around 500kb. There are a number of sites that can compress videos to your specifications, but be careful not to lose too much quality for larger displays!
- Hosting on Youtube or Vimeo: This can be a good idea if your hosting service isn’t delivering the loading speed that you’d like.
Adapt for mobile displays:
As of July 2016, most mobile platforms (especially and all iOS devices) will not play website background videos. It is important to include an image that will load in place of the video for mobile screens and non-HTML5 compatible browsers (looking at you, IE). As an increasing percentage of web visits come from mobile users, it is essential that this image is carefully designed for both clarity and beauty.
Dstillery has a good desktop website video but misses an opportunity when adjusting for mobile, choosing a light grey background with white text overlaid. That said, given the amount of text, it’s still a successful design for mobile because a more complicated background would interfere with reading this much text on a small screen.
A good example of mobile adapting is CSC’s site, which changes from a video background to a slider in mobile view, allowing the website to continue telling the story but without relying on video.
How to set up a video background using HTML and CSS:
While there are a number of jQuery plugins that can create the video background effect, it is usually best to use some simple CSS to position your video. Here are three excellent guides for achieving this effect.
Conclusion:
Some viewers will be drawn to the ‘cool’ factor of a video background but many users may find it distracting. If not done right, background video can negatively impact your entire site’s performance – even pages not using video. Before you jump on the background video bandwagon, keep in mind that if you’re forcing your visitors to watch a video, it better not just be eye candy: it better be good; it better be done right; it better contribute to your brand.
