Creative and Effective Use of Background Videos in Web Design


Julie Ellis

March 4, 2015

Back to Resources

Thanks to the introduction of HTML 5, video backgrounds are the newest trend in web page design. When implemented correctly, a video background adds an evocative, stylish, and artistic element to a website. It may be best to think of it like this. Words and still pictures are great tools to inform website visitors about the company’s history and mission, the products and services that are offered, upcoming events, contact information, etc..A video background is different. It is meant to convey feeling. Why is this important? Emotional response is a huge part of creating a brand. As is the case with most new innovations in web design, it can be tempting to use this new technology whether or not it is the best design choice. It is best to remember that the use of background video on a web page should only be implemented after careful consideration, and for the correct purposes.

A Few Rules for Implementing Video Backgrounds

1.Manage the Length of the Video

It is important to keep in mind that a background video will be playing on a constant loop. If the video is too short, the looping will have a disjointed, jarring effect that will be visually disturbing to the viewer. 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 generated the desired emotional response.

A good guideline to remember is this: A ten second video is probably too short, and a thirty second video is probably too long.

2.Keep it Quiet

One of the cardinal sins of web page design is playing sound without the consent of the viewer. Nothing about this new technology changes this rule.

Make sure that the background video begins playing without any audio, and allow the visitor to decide if and when they will turn on the sound. Better yet, nix the sound altogether and let the image speak for itself.

3.Pay Attention to Aesthetics

Looks matter. Background videos should be of the highest visual quality possible. Movements and transitions should happen seamlessly.

4.Don’t Forget Mobile and Tablet Users

Because background videos are the result of leading edge technology, not every device is capable of displaying them. Web designers need to plan for this and provide an alternative background in these cases.

5.Decide Whether to Download or Produce Your Own

Anybody who has access to the resources required to film their own background videos should certainly feel free to do so. If not, there is plenty of stock video footage available on the internet.

While it is possible to find low resolution video on the internet for free, most web designers will find that it is well worth spending a little bit of money on high resolution videos.

6.Finally Keep Performance in Mind

The use of video on a website is going to have an overall negative impact on the speed of the entire website. In many cases, this performance hit is worth the gain.

However, if the web designer opts to add a background video, s/he might want to conduct a performance audit of the entire website. There may be changes that can be implemented elsewhere that will improve speed overall.

About the author: having a Master’s degree in Journalism and love for travelling, Julie Ellis is financed by her freelance writing to investigate and explore exotic places of the world. Being a Chief Editor at Premier Essay she, as well, features articles for journals and magazines around the world.

Subscribe for the lastest CX content

© 2021 GetFeedback, Inc.|888-684-8821|Privacy notice|California privacy notice|Terms of use|Cookie policy

*Net Promoter, Net Promoter System, Net Promoter Score, NPS and the NPS-related emoticons are registered trademarks of Bain & Company, Inc., Fred Reichheld and Satmetrix Systems, Inc.