How To Use Website Video Backgrounds To Stand Out

by Hunter Liptrap   Last Updated Last Updated on Mar 18, 2015
Hunter Liptrap

14293420750_6efe0d3d28_k-compressed.jpg

Video backgrounds for websites was a trend last year and is still one of the biggest trends in web design for 2015. Last year was just the beginning and this is the year where the web will see the explosion of video backgrounds. This type of background provides an ultimate web experience with the ability to show more than an image. Videos draw viewers in, fascinate them and convey emotion in ways that images and words can't.

However, video backgrounds aren't for every website. Far from it, in fact. Video backgrounds should not be used simply because they are pretty, flashy or trendy. To utilize video backgrounds properly, they must serve a purpose to further the message of your brand or to convey your story in a way that a standard background image couldn't. To further that point, video backgrounds don't belong in every industry either; they should also be considered based on the buyer persona of your business.

Now, with all that said, the best place to grab stock video backgrounds for free is from Mazwai. They have amazing videos to download that are well composed and capable of creating an emotional appeal on the web, providing the right context. Honestly, though, it wouldn't be a bad idea to invest in creating your own video.

Websites using Video Backgrounds

Story & Heart

Story & Heart

At Story & Heart, video is what they do. As a video licensing platform that is aiming to create a filmmaking community, it makes perfect sense for them to utilize a video background to stand out from competitors.

Why They Stand Out

They make it easy for you to tell great stories. The best way to do that in terms of web design is a video background. That's probably a sales pitch for someone.

In combination with their header text, "Tell Amazing Stories," the video creates a sense or inspiration and urgency to work with them, because you feel that without them, you will never be able to accomplish great storytelling.

Big Cartel

Big Cartel

Big Cartel helps makers, designers, musicians and other artists build a unique online store and run a creative business. They provide a platform for website design and have a very specific audience in mind.

WHY THEY STAND OUT

Big Cartel uses the video to tell a story and evoke emotion that a background image couldn't do. The brush stroking across the screen, the workshops and the hand-crafted work resonates with a creative audience in a way that says, "Yup, I'm in the right place."

It is a showcase of creativity as well that has a direct correlation to their target persona, the artist. If you are targeting an audience that values the unique, your website should have a unique feel as well.

Notice the video background pulls from the full version video you can click to play. This offers great continuity in the design for a better user experience. Not everyone is going to click to play a video, so being able to take footage from video you have and repurpose it is a bonus. A key point is that the video background is muted, while the video contains sound. As a rule of thumb, your video backgrounds should not play any sound.

GSG Carpenteria

GSG

If you are wondering why you can't understand the words on the screenshot, it's because this website is in Italian. You can translate the page, but the feature section is an image cutout, so the wording is still Italian.

WHY THEY STAND OUT

The video background as a back drop, for what I have to assume is very moving text, is a brilliant idea visually. However, the reason the website stands out is that it shows the work being done. They are clearly a machining company and having an inside look into their production is a great tool for building trust with the company.

Unfortunately, this website does play music in the background which is a distraction and can surprise and annoy visitors, but it is a very pleasant tune.

The tribeca penthouse

Tribeca

The industrial treatment of the top is in perfect harmony with the building below. It is a logical expression how it could have been. From the street one should think it was first an old workshop later an artist’s atelier. The third evolution of this atelier is a living space to contemplate New York as it is today. - Axel Vervoordt

WHY THEY STAND OUT

The TriBeCa Penthouse is about the experience — and what better way to showcase that on the web than with a video. When you are selling architecture — not as a service or product, but as a piece of art — the experience is what becomes essential. Being able to experience the area surrounding the penthouse in the Tribeca district draws you in more than the images or the words.

Having a testimonial from Roberto Di Niro doesn't hurt either.

This video background does have sound associated with it and for the video to work, it does need the sound. However, having this particular video autoplay sound is not terrible, because you have to scroll to trigger it.

[hs_action id="2053"]

GENERAL TIPS FOR VIDEO BACKGROUNDS

These websites provide a real-world look at how to use video backgrounds to stand out, but there are a few tips that you can follow behind-the-scenes to make the most of your video background.

No Sound

Video backgrounds are on "autoplay," so when the page loads, the video plays. Playing audio on page load can be pretty jarring and unexpected for a visitor, which could be causing them to bounce from your page. If your video has sound, then add a click to play button to play the video with sound, like Big Cartel did on their website.

I realize this tip sounds hypocritical, or not important because two of the examples shown above have video backgrounds that play sound. However, one of them is activated by scrolling down the page, which means it is still triggered by a user action. Therefore, it is not a terrible idea. The other website is Italian. That is all.

Keep It SHORT

One of the knocks on video backgrounds is the page speed. Having a large video file playing is going to hurt your load time and, therefore, your SEO. These videos need to be kept short and played on a loop. If you are looking for a rule of thumb to follow, keep your video background between 20 and 30 seconds. That seems to be the standard.

Design for a range of devices

Unfortunately, not all devices or browsers can play video backgrounds yet. As a safety net, use a standard background image for when your video doesn't load. Even if it would load on a mobile device, it is usually not recommended. Forcing an autoplay on a bandwidth-challenged device can cause serious problems in the user experience. Instead, opt for a click-to-play button on mobile and a screenshot of the video as a standard background image.

Recap of Why You should use a video Background

Here is a summary of the ideas presented above:

  • Our brains are built to deal with a moving world and are naturally drawn to video.
  • As with any creative trend, video backgrounds should give your site a fresh, modern flavor.
  • We all understand the majesty and power of cinema. Video gives us editing, timing and framing tools that can help us convey our sense of style or brand identity.
  • In product/service-focused websites, the video can be used to give a sense of the product in action.

Follow the simple tips listed in this post and make sure your video background serves a purpose that a background image or text can't serve. This way, you'll be on your way to creating video backgrounds that will help you stand out from the crowd on the web.

Photo Credit: Video Recording

Author
Hunter Liptrap

Hunter Liptrap

Creative Director at Modgility
Hunter is Certified Inbound Marketing, Growth Driven Design, and HubSpot Design. He has a passion for the conversion rate optimization process. With 3 years of experience he has designed and built multiple websites across various industries.

Leave a Comment: