Video background loops are an effective website design and development tool
The use of video background loops is a fast growing trend in web design made possible by HTML5. Loop is a Boolean attribute of the video tag in HTML5 that specifies short video clips that play over and over in a “loop”. Many types of websites can benefit from these video motion loops by using them to create website backgrounds. Looping video motion backgrounds are often more effective than static images when it comes to getting the attention of website visitors and conveying a message. They can be quite impressive when viewed and are intriguing and good at generating interest when done properly. When done poorly however, it can have the opposite effect, and adversely affect your website so some care must be taken.
Criteria for using video background loops
Don’t use video background loops because they are “in” and other websites are doing it. As with other elements of your website like images, colors and icons, looping video backdrops are a tool for improving both your content presentation and the user experience of visitors to your site. It wouldn’t do to lose sight of your websites main objective just because there is a new toy to play with. The following are some things to keep in mind when considering using looping video backgrounds:
- Size matters: Loading time of your website is important and background video should be kept to 5MB or less, although ideally it is even better to limit to 1MB. The background video in a way is a hook to catch visitors. If you have more video content that you want to show that requires larger videos, hook them first and once you have their interest lead them to your other content. You will lose visitors if your site takes too long to load, which defeats the purpose.
- Video length: The length of your video is important. If it is too long it will not only be a bigger size and affect loading time, but can risk the visitor losing interest. You want to retain that first wow factor a visitor has when they see your video background. A video loop that is too short can seem overly repetitive or jumpy. Be aware also of how your video loops and where it repeats. You want to be sure the most important parts get noticed.
- Readability: Be sure that any text on a page doesn’t get lost in video background loops. It shouldn’t blend in with the background, it should stand out. The best video loops for backgrounds will be consistently dark or consistently light throughout so you can ensure that your text contrasts with the video background making it easy to see and enhancing readability.
- Mute the audio: Say “No” to pumping up the volume and mute your video. Being caught by surprise by unexpected audio can be startling and annoying. Mute the sound. You can offer the option if the user wants sound or make a video that won’t be improved if sound were added.
As with other parts of your website you will need to analyze which background designs work best for you for your website.
Websites with great video background loops
Here is a list of websites that make good use of video background loops:
The website uses looped videos supported by image backgrounds to draw a picture of an upcoming product.
Webgriffe uses a series of looping videos to create a memorable “welcome” section while demonstrating the workflow of the agency.
The Eva landing page is divided into three even parts and uses looped features to visually embrace various spheres of a video social network including fun and entertainment and workflows.
This video background website uses several videos of snow-capped scenes, which blend well with the website design as a whole and support the theme.
The Primal home page is based on one looping video with a double meaning
Perhaps the way one of these websites uses video background loops will get your own creative juices flowing.