Video Backgrounds in Web Design: Trends & Best Practices

 2   Tweet

video_trends_thumb

It should come as no surprise that fullscreen video backgrounds are quickly growing in popularity. Internet speeds are increasing, browser technology is advancing, and the simplicity of capturing HD video is galvanizing. Since this trend has gained such a large following I’d like to cover some general design tips, guidelines and some resources for creating your own video backgrounds.

Logo_x2_retinaThis post has been published as part of our Master Video in Web Design event. For more articles, tutorials and free files click here.

From entertainment venues to creative agencies and personal portfolios, there are dozens of websites that incorporate fullscreen videos. Granted not every project can benefit from this type of server-intensive design technique. Yet using a keen setup paired with careful attention to detail, fullscreen video backgrounds can be an enormous benefit to an overall layout design and website branding.

Simple Videos with Contrast

The best style of background video will build heavy contrast between the video and the page text. A simple rule of thumb is to lighten text with a dark video or darken text with a lighter video. It definitely helps if the footage is mostly uniform with just a few colors.

coulee creative agency website portfolio

Coulee Creative is a pristine example. In the website header you’ll find a small navigation along with some intro text. The video switches between various scenes but each of them appears somewhat faded. This effect is created with an overlay grid of repeating black dots. If you look real close you’ll notice a repeating pattern on top of the video.

While this tiled pattern method isn’t foolproof, it really does work and looks fantastic. You might also try editing the video in software like Premiere Pro or After Effects – but not all designers will have experience with video editing.

If you’re looking to get started with Adobe After Effects and not sure how, Tuts+ offer a tutorial series that will help you get started quickly.

Just Say Mute

Website video media that’s setup to auto-play has one fatal flaw: loud audio. I can’t count how many times I’ve recoiled away from a website because of the unrequested noise. It’s something that’s almost never expected, which means it’s unwelcome and just plain annoying.

When people notice an embedded video player on the page it usually waits to be activated. The person can choose whether to play the video or leave it alone. Video backgrounds are set to autoplay, which is totally fine. But there’s a reason why most of them are muted by default.

photodune-5105254-woman-screams-into-megaphone-l

People browsing the Internet will often be playing music of their own. When another sound comes out of nowhere it’s either a brief shock or a persistent annoyance. Even if you assume most visitors will have their speakers turned off, is it really worth the risk?

Do the right thing and just mute background videos. Trust me, you and your visitors will be happy you did.

Partial-Height Video

Not every video background needs to conform to a fullscreen interface. It may be wiser to limit the background section to a smaller height, thus leaving direct access to further areas on the page. Take a look at BKWLD to see a wonderful example.

bkwld portfolio background video design

All of the video content is crisp and fits nicely into the layout. Also there’s no text to worry about, so the design flows with less effort. Each design project will be different so it’s smart to consider all of the options before moving onto a completed mockup.

risk everything website background video design

Another example I really like can be found on Risk Everything. The video tends to shift between differing rates of contrast, but it also fits nicely into the header and doesn’t belittle surrounding content.

There is no size requirement when it comes to fullscreen backgrounds. Most videos will span the entire width of the page but there’s no reason you have to follow this ideology. Find whichever dimensions work best for each project and take it from there.

Parallax Scrolling

The video BG trend is most commonly fitted into divs on the page. The design often runs naturally and scrolls like regular content. But some designers go for the parallax effect where background content shifts as you scroll down the page.

whiteroom uk parallax video background

Take for example Whiteroom which actually uses a fixed video background. As you scroll through various content sections the background will follow along. This is a strange yet intriguing style of background design which I haven’t run into on other websites.

Specific development techniques would be required to incorporate a parallax effect into the background. It would definitely require some custom development or a combination of plugins. If you attempt to build a similar parallax interface Stack Overflow will be your best friend.

I recently found a fullscreen video case study which talks about the implementation of a video background on Wistia. There’s a surprising drought of fullscreen video articles but information is out there if you know where to look.

Browser Compatibility

On the topic of usability there’s a burning question related to video filetypes and widespread browser support. HTML5 has shortened the gap but we’re far from a universal solution.

So what can you do to ensure compatibility with background videos? The first step is to check browser support for native filetypes. The website Can I Use provides a detailed analysis of CSS & JavaScript properties, along with HTML5 elements. Use this to your advantage and remember to aim for a specific audience.

caniuse html5 elements properties webapp

If you have traffic analytics at your disposal they can prove immeasurably helpful. Track which browsers are most commonly used and tally up the level of support for each video type. Flash video is perhaps the most widely-supported choice if you need to handle legacy versions of Firefox and IE.

But generally speaking aim for the most widely-supported codecs and video containers. H.264/MP4 and VP9/WEBM seem to be the two most popular choices. If your video uses at least one of these filetypes then you’re off to a great start.

pixate fullscreen video background effect

Another important thing to keep in mind is file size. Your 1080p video might look amazing scaled on the larger iMac. But is it worth the trouble of forcing a video that’s hundreds of megabytes onto each visitor using a 13″ laptop?

Unlike traditional JPEG backgrounds, videos have a more natural method of scaling. Even with a reduced filesize your video should still look pretty darn good. So for video background usability the two most important tenets are proper filetype and reduced filesize.

Video Background Resources

Unless you want to reinvent the wheel by hard-coding a video background from scratch, in which case I wish you the best of luck and a 6-pack of Red Bull, then investing in a plugin will reduce your coding time & blood pressure. Since video backgrounds are still somewhat new to the scene you won’t find that many options. But there are some great JavaScript options out there, as well as some WordPress plugins, that will help you get the job done.

Source Video

If you’re looking for source video to use as a the actual background, you might like to check out the Stock Footage category on VideoHive, they currently have a library of over 90,000 videos!

Closing

The trend of fullscreen backgrounds has slowly burrowed itself deep into the world of modern web design. Although background images are still the most popular choice, video backgrounds are gaining traction with larger support and easier methods of implementation.

This post should offer ideas in the way of tips and resources to help any designer or developer create a marvelous video background experience.

Logo_x2_retinaThis post has been published as part of our Master Video in Web Design event. For more articles, tutorials and free files click here.

  • Some excellent things to think about. Thanks!

  • Chris Donnelly ツ

    Excellent tips! Slightly blurring the video also allows the text to remain legible (the white room example has a sharp focus below the main text) 🙂 wonderful examples… Thank you!