[intro]Background website videos have been all the rage. Here are some tips and guidelines for how to best use them on your site and garner oohs and aahs rather than boos and blahs.[/intro]
The use of video backgrounds on websites (and apps) is a design trend that’s already been around for a few years but still seems to be on the rise. It’s easy to see why. Not only do they elicit plenty of oohs and aahs, faster internet speeds and wider access to those speeds, improving video codecs, advancements in browser technology and plenty of accessible ways of capturing and editing high quality video, have created an environment where streaming video content of all sorts has become a norm. In lock-step with these changes, we live in a world that expects more video content, driven by an on-demand economy that has changed the way it is delivered and consumed.
Full-browser background videos on websites is certainly a trend. Like any trend, it can be subject to overuse and poor implementation (think, parallax scrolling). There are no hard and fast rules about there use. But, after implementing background videos in our recent Stanford annual report, we thought we’d share a few tips and guidelines that we learned along the way. Full-browser background videos with overlaid title text may die as a trend, but online video content is here to stay and is only growing. It’s just the way videos are incorporated into a site that may change. Still, we hope these tips will hold some value when that time comes.
Tips & Guidelines: The Non-Technical Stuff
There are some fantastic examples of video backgrounds out there…then there are the not-so-fantastic ones. A pitfall of most anything novel or trendy is that if it is done without purpose – the result can be cheesy, tacky, and overdone. Here are some tips to help steer you clear of the cheese:
1. Be intentional. Be consistent.
Like everything on your website, there should be some intent and purpose to why a background video is used. It’s a background video, but the content should still be consistent with the messaging of your overall website – your brand story, your mission, your values, your ethos. It’s there to help support your key messaging.
2. Remember your user’s experience.
Once the purpose is there, it’s about integrating the video as a part of your entire website’s design. Just because it takes up the whole page, doesn’t mean we should throw user experience out the window. It’s important to still remember the video as a design element. And as such, it needs to work together with your website’s layout, supporting copy, images/graphics, style, colors, call-to-action, etc.
3. Your video quality needs to be high.
Not only in its production value, but in it’s content and ability to tell a story or communicate a message. With so much video content out there (and so much great video content) vying for our attention, people now expect incredible quality. If it’s there, it better look fantastic and actually mean something.
Some great examples
- Greenland Article: http://www.nytimes.com/interactive/2015/10/27/world/greenland-is-melting-away.html
Isn’t everyone a sucker for beautiful HD drone footage of nature? And even though this has been done to death, it doesn’t feel tired and overdone here because it’s been done so well. The video helps set the mood and gives a visual for the article that lies ahead perfectly. And the title and subtext below the video help give it purpose.
- Riley’s Cycle Shop: http://www.rileyscycles.co.uk/
A video background doesn’t have to be a full on production to be effective. Here a GoPro-like shot of a person riding their bicycle to Riley’s Cycle Shop is a very simple idea with a bigger impact. It reinforces the mom-and-pop nature of this local institution, as a cyclist literally rides the local streets up to the store’s front door.
- MSSNG: https://www.mss.ng/
A very short looping background video that’s almost a mini-trailer that teases the full video that plays on page. The visuals in the looping background are on-point with the identity and purpose of MSSNG, creating the world’s largest genomic database on autism. It helps entice the user into hitting play for the full video.
Tips & Guidelines: The Technical Stuff
Now on to some of the nitty-gritty. Most of these tips are to help optimize your site performance and give your users an even better experience.
- File size: keep the video under 5mb; ideally, under 500kb. Some of this depends on the length of the video, but the smaller, the better. The biggest reason is the negative impact larger file sizes have on site performance, which, in turn, affects user experience. We also want to be mindful of the people’s data plans when it comes to viewing videos on mobile or tablet devices (see bullet below about fallbacks). This is becoming less of a concern as time goes on, but it’s still worthy to keep as an important consideration.
- Length: 12 – 30 seconds in length. Too short and it becomes repetitive. Too long and it becomes a narrative unto itself. It also affects file size, of course.
- Have a fallback image ready. Note, this would be different from setting the poster parameter in your <video> tag. That would simply . The two biggest reasons are: to take browsers that do not support HTML5 into account; and to consider users on mobile devices/smartphones from the perspective of data plans and the smaller viewable areas.
- Resolution: go with 720p (1280 x 720). There’s a negligible perceivable difference between 1080p and 720p when it comes to background videos (because they’re in the background!). Heck, if you can get away with 640p, go with that. Lower file size is a priority, and a lower resolution and bitrate (next bullet point) will go along way in saving some space.
- Bitrate: aim for 700kbps – 1500kbps. Again, no hard and fast rules here. In our experience, this has been a good range. You may be able to reduce or increase the bitrate depending on the content of your video. But this is variable that you can play with. And paired with some of the overlay/content tips in the bullets below, you should be able to get to a file size that is manageable for all.
- Bitrate encoding: VBR 2-pass. Sometimes this will be called multi-pass. This will depend on what application you’re using, but if you have to option to encode your video at a variable bitrate (VBR) and 2-pass, you should. Here’s good explanation of why (http://help.encoding.com/knowledge-base/article/what-is-two-pass-encoding/). You can normally achieve higher quality at lower bitrates, and thus a lower file size.
- Frame rate: same as source video. There are some cases – i.e. when there isn’t a whole lot of movement in your video – that you can reduce the frame rate to decrease the file size of your video. But in most cases, you will likely stick with the same frame rate as your source. Reducing it too much may result in choppy or jerky footage.
- Use video content that will help hide compression artifacts. This isn’t absolutely necessary, but a video with these qualities will give you a little more room to compress your video to an even smaller file size. The more a video is compressed, the more artifacts (https://en.wikipedia.org/wiki/Compression_artifact) will appear. To help hide these artifacts, you may try to use video content with: less movement, less dramatic changes in lighting and color, and less drastic cuts between scenes.
- Use an overlay to help mask compression artifacts. Another widely used tactic, is to place a subtle pattern or color overlay with opacity on top of your video background. This can not only be effective in helping hide compression artifacts, but also comes in handy when you need to lay text over a video. Patternify is a cool little tool that generates the CSS for a variety of pattern overlays for you.
- File formats: upload .mp4, .webm, and .ogv versions of your video. Using all three in your html/css should cover almost all the bases in terms of browser support. And honestly, the .mp4 and .webm files should be enough (the .ogv file would be for older browsers).
- No audio. In most cases, you will likely not need to include any audio with your file.
Implementation
We don’t go into the details of coding video backgrounds in this post. But there are some helpful tutorials online (e.g. Background Video Tutorial, Another Background Video Tutorial!)
