Background video loops — does it fit my website? How to build it?

If you haven’t been living under a rock for the last couple of years, you’ve surely noticed that background videos have become a serious trend in web design. No wonder: it’s a nice way to attract visitors’ attention and engage them, showcase a product, and create a specific mood on your website, to name a few benefits.

If implemented correctly, background video loops can give your website a modern, professional or luxurious look. On the other hand, a poor quality, glitching video won’t impress anyone, so if you mess it up, it can be counterproductive. That’s why it’s crucial to learn the ropes before trying to upgrade your website with this kind of interactive element. Having under our belt a few websites with video loops created for clients, we decided to share the dos and don’ts we’ve learned along the way.

What is a video loop? Should I have it?

Let’s start with the theoretical part. Video loop, or video in repeat mode, is a short clip that can be used as a background on a website. It can appear in any part of a page, however, in this article we will focus mostly on videos in the hero section. It’s worth noting here that embedded YouTube videos are a completely different story with different purpose and implementation.

Now, if background videos are as appealing and engaging as said before, does it mean it’s always a good idea to have it on the website? Well, we believe that the answer is no. Indeed, there are plenty of websites with beautiful and purposeful videos with compelling storytelling, but the internet is also full of very, very bad examples. If you have some well-thought idea about what you want to show: for example your company’s mission, spirit or a specific product, then go ahead. Otherwise, implementing a video just for the sake of it doesn’t make much sense.

Background video on homepage: how we did it

One of the reasons why we are talking about video loops now is that we have just published a brand new website for Bluehouse Salmon, one of our clients. One of the requirements was a background video in the hero section, visible immediately upon entering the website. During the development phase, we faced some challenges and learned some lessons worth sharing. Here is a handful of tips:

• Don’t forget the branding. The video won’t look good on your website unless it’s consistent with your branding (color palette, style, etc.). That’s actually true for all kinds of visuals you use, but we can’t stress it more: even the most beautiful video will look odd and out of place if it doesn’t match the rest of the design.
• Prepare guidelines for the video producer. If you don’t have your video ready yet, you’re in a perfect situation: it can be made from scratch following specific instructions, including technical details (such as file format) and general UX hints (length, composition, shots).
• It’s all about the product. Define what do you want to tell about your product with the video. What are its most interesting features or elements that would look good in such a video? If you can’t think of anything, maybe that’s a hint it doesn’t have much sense in your case?
• Have UX and page speed in mind. Make sure that the video is loading without any lags and other issues that could hurt the user experience. The same applies to page speed performance: videos that slow down the website can be bad both for UX and SEO.

Things to consider: three perspectives

Moreover, there are 3 points of view you should take into account: marketing, UX, and development (technical) perspectives. Balancing them is the key to successfully implement a video loop that will perform its function.

Marketing perspective

From the marketing point of view, the main goal of a background video is to make sure that users’ attention is directed towards your product. Therefore, you might want to triple check whether the video is really showcasing the product the way it is intended. Put yourself in the potential customer’s shoes: is it clear from the first sight what is your website about? Does the product look appealing? Is the video dynamic (multiple shots from different perspectives) or almost static with only one shot (if that is the case, maybe you’re good with just a photo?).

In the example of our client’s website provided before, the video loop worked perfectly because there was only one, very specific product (salmon), but it might not work so well if your offering is much wider or hard to represent in a visual way.

Of course, there’s a second scenario, when you are offering a service, not a product. Is a video on the website disqualified in this case? Not necessarily. There is another approach: some companies decide to implement videos featuring their employees in a professional setting or in a more relaxing style, depending on the work culture. This is a nice way to tell something more about the business (without using words!), for both marketing and employer branding purposes. See the website we’ve made for one of our clients, Dr. Eckhardt software house, for some inspiration.

UX perspective

At Adchitects, we have developed our own process of preparing video files for clients’ websites that allows us to deliver the best user experience. It can start with a ready-made video, if the customer already has one (occasionally, some enhancements are required to adapt the existing file to the website design), or the clip is prepared from stock footage. Either way, at this step you should make some decisions: how long the video should be and with how many shots (we advise between 10 and 20 seconds and 4 to 7 shots; the more shots, the more dynamic the video). If you’re buying stock videos, the latter decision will affect the price, because every clip is sold separately.

Choose shots that will look good on all screens, for instance, if your website is responsive, you’d be best with a central composition, because the main part of the video will be visible on all types of devices. Most probably, your video will need some editing such as color correction, color grading, or adding an overlay to adapt it to your website design or to improve the readability of the text you will put on your background.

Then, you should export your file following the standards of the platform you will use for upload. We opt for Vimeo because of its high bitrate, outstanding video quality and features such as looping, autoplay, etc. Usually, we choose the following export settings:

• H264 video compression standard: the best quality to compression ratio.
• Bitrate: Vimeo recommends between 10 to 20 Mbps. If your video is more dynamic, try the higher bitrate.
• Resolution: should be high enough to ensure proper quality on hi-res screens, so 1080p is recommended.

Development perspective

Now, let’s get more technical. We have some hands-on tips for developers with the mission to implement a video loop on a website. First thing, maybe obvious, but extremely important, make sure that the file is not enormously big or long, as it can affect loading time and frustrate users. Also, it won’t hurt to use one of our tricks: set the first frame of the video as a background. It’s a better idea to show this static image instead of empty space while the video is loading. There’s a couple of ways to do this, for example, if you’re using HTML <video> tag, add the ‘poster’ attribute:

If you’re using embedded videos, turn off the elements that may distract users: the platform’s logo, play/stop/mute buttons, etc. In the case of Vimeo, you’ll need a premium version (Vimeo Plus) in order to use this feature. See for the code below:

Always remember to mute your clip, because some browsers won’t play a video with sound. And obviously, don’t forget to loop the video so it doesn’t stop playing. When it comes to the file format, we recommend .mp4: it’s supported by all browsers, so there shouldn’t be any problems. Another good practice is to set the video to full width and height on smaller screens (smartphones and tablets). We do it for bigger screens as well to guarantee a fully immersive experience.

Wrapping up

In a nutshell, a video loop on the website is a fantastic idea from the marketing point of view: it attracts and engages clients with visual storytelling. With a good video, you can communicate your message in a way more sophisticated way than with images or text. However, you should always stick to the best practices if you don’t want to cause negative effects such as user frustration or poor website performance.

So, shall we discuss video loops in details, thinking about dropping one on your homepage? Then feel free to reach out, we’re ready to offer some advice!

Still not sure if a video background is a good choice for your website and product? Here’s a couple of quality benchmarks to get inspired:

Dr.Eckhardt+Partner — IT Services,

Bluehouse Salmon — consumer product,

Practical Magic — B2C services,

Beans Agency — B2B services,

Hotel Capolagala — hospitality