5-8 seconds. That’s all the pitch-time your website has to LOAD, HOOK and HOLD, and ENGAGE your visitor. Irrespective of your genre, the target of your website design is to tell a compelling story and convey the right message to your prospective audience. Given that hundreds of other good websites are ranking for the same keywords in your industry, your prospective customers are avoiding information overload by sifting through the websites. You MUST make the most out of your pitch. AND one of the best ways to do that is to PREVENT them from skimming the CONTENT on your website or important landing pages. This is where video backgrounds step in. They offer one of the most engaging and interactive forms of content, and can tilt the balance from a good web design in favor of a great web design.
Adding Video vs. Adding a Video-Background to Webpage
Remember parallax designs? They add depth to the websites, and hence catch attention, hold it, increase engagement, and ensure greater time on the website. All of this leads to greater conversions or you may need to optimise your conversion rate. A lot of video content is being generated each day to engage customers across the web. However, simply placing a video on a webpage unconsciously triggers the perception of “more work” and “more information”. They have to be clicked to be played. And BEFORE that, they have to be loaded. Given that any delay on a converting webpage adds more friction, a simpler, more powerful and eye-catching method is to include video backgrounds optimized for faster loading and automatic play. But how should you use videos in backgrounds? The possibilities are endless, especially when you realize that it will most likely become a trend for serious web marketers. So, in this post I’ll be discussing some possibilities for your website and landing pages (as we’ll discuss later, video backgrounds are not suited for every webpage). Let’s get started.
Video Backgrounds in Website Design – Some Case Studies
Click the company name to visit the website.
Case # 1 – Barrel Recap 2012
Barrel, a digital website agency has used the video background to detail its achievements for one year. INTERESTINGLY, the video background has nothing to do with the work that the company has performed. It is simply an unexpected human gesture (of picking a book from the shelf). This un-intuitive start automatically wells curiosity to the page, setting the mood for the recap. It creates the moods and holds your attention long enough to achieve the aim of the page: a simple click on the “Start Recap.”
Case # 2 – Matter
Matter is a strategic design consultancy firm whose website uses a series of short, random, and unexpected videos to make the experience remarkable. It sticks with your memory because it forces the reader’s brain to “try” to connect the abstract meaning behind the video with what the company does (which its short copy defines as “we help individuals, organizations, and causes matter to those who matter most to them”). HOWEVER, notice that the short copy, albeit extremely powerful in its messaging, uses a color that does not stand out from the video background. The background video is in grayscale, and so the white text becomes difficult to read. When using video backgrounds, ensure that the color stands out across the entire video or at least long enough for it to be completely read.
Case # 3 – MyProvence Festival
The MyProvence festival website’s home page is using the video background to show various highlights of artists exploring the area. Also notice that the music and the videography are working in harmony to create the uplifting and energetic mood that the website aims to share. Notice the energetic video and the impact quick change of scenarios and frames has on the overall engagement from the background.
Case # 4 – EagleClean
A London based cleaning company, EagleClean, uses a negative space to introduce an unexpectedly brief and quirky video of a gloved hand cleaning a small smudge off its homepage. The video brings the visitor at alert with a surprise, and then sets the mood as they realize what the gloved hand is doing. It shows a great way of reinforcing branding for the website. It also shows how videos can be used to for visually communicating meaning without using web copy.
Case # 5 – ONY
For the budget conscience, video backgrounds can be as short as possible, as long as they engage your target audience. This is what ONY, a digital branding company does on its homepage. The video background is simple, with their company initials being repositioned by a human hand. The background is simple (white all together), yet eye catching, achieving the goal of initiating the new visitor to the mood of the webpage and then letting them scroll down at will.
Case # 6 – IUQO
Using one of the shortest background video loops, the online branding agency’s home page creates a serene mood using the live sky as its background. It powerfully communicates what it values (collaboration across the globe) to its target audience. This is a great example of simplifying the idea that the video background communicates. Remember, the purpose of the video background is to engage the visitor and not necessarily communicate the USP. The Luqo’s website shows this by simply LINKING their values and prepositions with an underlying theme, and communicating it with a video background.
Case # 7 – ISurfBecause
Surfing is a passion for people, and I Surf Because communicates that passion suing powerful videography of surfers battling against high tides in the oceans. Each short video clip is followed by a crisp quote and question that will most likely inspire the surfers passionate about riding the waves. Their homepage speaks about the importance of using videos for communicating practical, real-life experience of how a scenario plays out to deeply connect with the people they are targeting.
Case # 8 – Windward
An app designed for the sailors, Windward displays data around tides, wind speeds, and temperatures. The landing page displays a looped video of the sea waves, which is neither distracting from the actual purpose of the page (downloading the app), but also sets the context and mood for the app – its use on the high seas.
Case # 9 – Y.CO
Yachting may not be on your list, but Y.CO, a yachting company’s homepage will inspire a lifelong memory of the fun times this journey can offer you. The website’s homepage uses a simple video showing a family enjoying a relaxing and happy time on a yacht. However, long videos need to be optimized so that they can load faster, hence preventing the visitors from abandoning the page due to slow loading.
Case # 10 – IceSky
How would you engage someone with climate change on their website? A video background with text in front, that’s how! Ice Sky decided to incorporate a delicate balance between written text and video background on several pages to communicate the history of climate change and how it is continuing to affect change. The videos are animated and run smoothly (but dimly) in the background with a strong music. This allows the visitors to engage on multiple levels with the content and the website, boosting their retention and hence the possibility of greater shares.
Case # 11 – Arcade Fire
Promotional landing pages must be powerful so that not only is the message communicated to the target audience, but MAKES them share it. Think of making pages go viral. Now think of videos as being the content format with the highest potential for going viral. Combine the two. Did you get to a viral video background? So did Arcade Fire, an Indie rock back that is known for being quirky. And who used an experimental, interactive video background for promoting their album “Neon Bible”. The landing page for the album plays the title track as sung by the lead vocalist (in complete sync). How is it interactive? Give it a go yourself!
Case # 11 – MarisaPassos
A website for a graphic designer and branding specialist, Marisa Passos’s website uses an abstract video background ( a color drop falling into clear liquid, and diffusing across the screen). The video background clearly demarcates the page into two distinct regions, engaging the user to the video on one side before they can move to the menu to the left. Think of it as a simple exercise that reduces the “perceived” cognitive load of going through the basic navigation (which in case of Marisa Passos includes multiple services.)
In conclusion – Using Video backgrounds
In the end, the main ideas in this post can be summarized as follows: Imagine opening a webpage and directly connecting with music background and stunning videography, loading fast. This is what videos backgrounds aim to do. However, the lack of skimmable text that appears on the webpage should be taken as a clear indication that it has been built on the assumption that only qualified leads will come through. This means that video backgrounds must be used sparingly, and only on pages where more text can add friction to engagement and conversion. Share your thoughts on the matter in the comments below!
If you need any help with video backgrounds or your website design , please click the link here.
Open the conversation.
Ask us anything. From basic questions to complex queries about marketing, optimisation and design.
Get in touch