June 1, 2017 | Kayla Hollatz
“Wait, is that background moving?”
It’s not just you. It really is moving.
They say video marketing is the future, which has led more businesses to incorporate video backgrounds into their websites.
While video backgrounds aren’t necessarily “new”, the web development industry has seen a heightened trend in widescreen video use with a small amount of overlay copy (if any). This is most common on parallax scroll websites, which means the website background (in this case, a video) moves at a slower rate, creating a 3D effect as you scroll down the page.
Somewhat surprisingly, research has found that parallax scrolling has a pleasurable UX because of its usability, satisfaction, enjoyment, fun, and visual appeal. Participants in the experiment said parallax scroll was “more fun” than non-parallax scroll websites.
While true, fun doesn’t always convert. So how do we decide whether or not video backgrounds are worth adopting?
A Case For Video Backgrounds (And Why We Use Them)
Last month, we launched our website redesign for ThinkSEM.com. You may have noticed that when you visit our new homepage, you’re greeted with a video of a dog with its hair blowing in the wind.
Not only is it entertaining to see a dog riding in the car with the window down, but it also cleverly ties in with our overlay copy: “Leads. Don’t let them pass you by.”
It’s just the right amount of shock and awe to create a memorable user experience.
Our Chief Creative Officer, Dave Dechant, had this to say about our new use of video backgrounds:
Really, video backgrounds are a way for us to make our pages more interesting and promote engagement. The main thing we tried to keep in mind was not doing it just for the sake of doing it. We tried to make sure the hero content made sense in context with the videos to either be entertaining or interesting. Other than that, it was also just a way for us to change up the website and show a bit of creativity.
But we’re not the only ones using video backgrounds on our website. Brands like Nike and Spotify have adopted video backgrounds, along with a slew of Awwward-winning websites in the creative industries.
All the “cool kids” are doing it, but should you?
Before you go hog wild and upload video backgrounds to every page of your website, let’s cover some best practices to keep in mind as you plan your video strategy.
Video Background Best Practices
Turn off auto-sound, please
There’s nothing worse than visiting a website and hearing random music or audio automatically play from your speakers. It’s especially annoying when you’re trying to listen to your own tunes or podcasts, which we do regularly in our Roseville offices.
When you use a video as a full-width background, it’s most likely used for its visual appeal. It’s not the best place to watch the full video with sound since that’s not the user’s intent.
Instead, we recommend taking a 10-15 second clip from your video to place as the background and embed the video player with the full version video somewhere else on your website.
Make sure your videos are high-quality
It’s better to have a crisp, high definition photograph or graphic as a background than a fuzzy, pixelated video. Without a quality picture, your video may become distracting and downright unappealing.
When video backgrounds are used, they often take up a sizable chunk of website real estate. (Look at our homepage to see what we mean!) Blurry, fuzzy video backgrounds are a big turnoff so make sure to test the quality of your video.
Also, test what your video looks like on multiple devices. For our new website redesign, we feature video backgrounds in just about every page on our website from our homepage to the blog, but we have static images on our mobile version. Why? Because the video backgrounds were unnecessary on smaller screens and they were slowing down our mobile load time, which brings us to the next point…
Test load times
For the love of site speed, PLEASE test your load times before you start using video backgrounds, or any other visual element for that matter.
After you compress your video file size, make sure you test the speed of your website with the video background and without it. Even if the video background slows down your site’s loading speed by 2 seconds, that could be enough for visitors to click out of your website and abandon your page before they even get to see your fun, clever video.