A Definitive Guide to Website Background Video

Web development trends appear and disappear quickly, but some of them are so strong that they can’t be ignored. Using video as a webpage background is one of the trends that has stuck around.

However, following trends just for the sake of fashion is not always wise. The best way is to follow the latest trends but have an understanding of how your business may benefit from it.

So, we decided to create this ultimate guide to website background video creation. We hope it will help you to decide whether your business really needs, or if you’d be better off utilizing other useful video marketing strategies.

What Is a Background Video

It’s easy to define a background video since its essence is clear from its name. A background video is a piece of video content that is used as the background of your website. There are a lot of ways to use one on a web page, and there are also several styles you may choose from. The most important thing to know is that:

• Your background video should perfectly fit the website design
• Have a clear purpose.

Next, we’ll share more about the possible purposes of using background video.

The Main Purposes of Using Background Videos

There are three basic goals a background video may help you to achieve.

1. Convey atmosphere

Background videos can create a special atmosphere for your business, giving your visitors the feeling of brand immersion. This is a good approach for the b2b sphere when the right atmosphere is able to convey corporate seriousness and strengthen professional reputation.

2. Show your product or service.

In this case, the background video will work as something between a demo and an explanatory video. This is a good approach for any product or service that’s fairly easy to use. For example, this will work well in an online store with one key product, or for a mobile application demonstration. For the latter case, the viewer can quickly see the point and make a decision faster.

3. Provoke an emotion.

We make most purchases under the influence of emotions and desires. The first impression we get is almost always visual. A background video is an opportunity to quickly stir emotion and subsequent desire before the rational part of the brain connects to the process. For example, this approach will work well for the tourism industry, when the visual impression (such as a tropical beach) will further strengthen the desire

Background Video Styles

Animated Background Videos

Animated background videos can fit almost any business goal and corporate branding. Let’s look at a few examples.

– Miki Mottes is a designer and animator, so his website is entirely animated. The background of his website works as a portfolio so each visitor can immediately see his creative style.

– Your Plan, Your Planet is a scientific project launched by Google. This is an animated landing page, and all the further interaction with the website is animated too. The goal of the project is to teach everyone to use resources carefully. Simple and understandable animation is a good way to do it.

The advantages of using an animated video as a background are that:

• you can immediately show your corporate style and make it recognizable
• it’s a good way to quickly attract attention to your key product or show how it works
• animated videos are easier to create then professional live-action videos.

Live-Action videos

Patagonia, a seller of goods for active lifestyles, uses a background film that tells the story of a man who decided to become the best climber in the world. Here we can see a combination of background video and a well-chosen story that will be interesting to the target audience and resonate with their values.

Project Skin, a skin care clinic, uses a background video to set the right mood and immediately show what level of care and friendliness awaits every woman who visits.
The drawback of this approach is its cost. Real-life videos mean you’ll need to pay to rent the shooting location, hire actors, and invest in professional lighting and shooting equipment, and/or hire a full crew

Stock videos for website background

Stock videos for website background can be both animated or live action, but the main thing to understand about them is that they will not be directly related to your business. What’s more, there’s a huge probability that the video you choose is already used somewhere else. As for the pros, this is the lowest-cost solution, but that definitely doesn’t make it the best solution. Here are the reasons why customized background videos can be a better choice for your website.

Why Your Background Video Should be Customized

• Stock video can’t ever be a perfect fit for your business and can spoil your reputation if the visitor has already seen it elsewhere. Research suggests that modern users subconsciously associate low-quality web content with an equally low-quality product or service. High-quality video as a background is the first step to convince users that your site, and therefore your offers, are worthy of their attention as well.
• Customized video is able to give users the right visual impression from the first seconds. 94% of a first impression is design-related. Customized background video is one more chance to enhance your first impression and entice the user to further interaction.
• Custom background videos are more engaging. They make users spend more time on the page, showing good behavioral patterns to make your site more reliable in Google’s opinion. Google appreciates custom and engaging content, and this is true for videos as well.
• Customized video as a background can deliver any message you want. As we already said, the background video on your site can have different goals, which means it can communicate various messages to your visitors – from creating the right mood to enhancing your reputation through visual means.

How to Make Your Background Video Perform the Best

Background video is a fairly powerful marketing tool, but you need to use it correctly. Here are some pro tips.

Full-screen background videos perform well on landing pages

A landing page requires a fairly simple structure and fast loading. Here, you can safely use full-screen background videos without harming the user experience and distracting from their main purpose. But keep in mind that in this case, your background video needs to be perfectly suited to the landing page design. There should be one overall picture with the video and other design elements perfectly complementing each other.

Below the top

Complex websites with a lot of hierarchy may work well with a background video below the top bar and with the possibility to hide it. For example, you can create a background video advertising one of the best-selling items of your online store. However, this should not prevent users from viewing other products as well. To do this, users should be able to hide the video or pause it.

There should be contrasts

There should be a contrast between video and text. Visual impression is crucial, but users should also be able to read the text as well. For this, it’s necessary to consider the design of the page. Make sure to take into account the presence of free space between the video, text, and navigation sections.

Consider mobile users

It is important to take into account mobile experience when adding a background video. Statistics show that more and more video traffic comes from mobile devices. This means that if you want to add a background video to the mobile version of your site, you need to think through the mobile interface even more carefully. Perhaps it makes sense to hide some sections of the site and give the video more priority, but sometimes the opposite strategy can also be effective.

Time adults spent on mobile phones

How Background Videos Are Created

The most interesting thing is that there is no universal strategy of how to create a background video. Your plan of action will depend on your goal and the result you want to achieve with the help of a background video. You may either add it to a ready-made website, or think about it in advance at the development stage.
In the latter case, it would be wise to strengthen your development team with a video production company. They will help you to choose the right style, develop a marketing message, and create a video that will perfectly suit your business, your website design, and the mood you want to convey.

Main Mistakes to Avoid When Creating a Background Video

Experience says that the more pitfalls you foresee, the more effective your background video will be. Here are the main mistakes during background video creation that may be costly in the end.

• Using stock video or any other video you randomly pick. We already talked about this. In the best case, stock videos will not bring results. At worst, they can harm your business and reputation.
• Auto-playing video sound. Users unanimously claim that this is one of the most annoying online situations. A sudden loud sound can irreversibly kill the desire to work with you – especially if you work with “silence-sensitive” categories of people, for example, parents with young children.
• Limiting the length. It’s not worth limiting the length of the video. In general, it can last as long as you like or continue on repeat, but under one condition – this should not affect the page loading speed. Therefore, it’s also important to choose the right approach to video storage. We will talk about this further.
• Making video more important than usability and other content visibility.Sometimes business owners think that background video is a magic pill for ideal user experience. However, this isn’t entirely true. The presence of video shouldn’t complicate the interface, interfere with the search, or prevent easy access to other content on your site.
• Choosing an inappropriate resolution. Most background videos follow standard HD size (1280×720), but it may also depend on your website dimensions. The best idea is to consult with your designer. If you are creating a website independently using WordPress or Wix, the resolution you need will depend on the template you use.

• Wrong decision with hosting. It’s possible to host your background video on the same server as your website or on Youtube, but you need to consider the pros and cons of both approaches. If you decide to store the video on the same server as your site, you don’t have to worry about losing control over it, but the page may load more slowly. Storing video on YouTube or other business video hosting sites means the opposite situation – fast-loading, but you’ll always have to hope that the third-party service will work correctly. Here’s our guide to help you make the right choice with business video hosting.

• Excessive movement or something too distracting. A video that’s too dynamic can cause dizziness among movement-sensitive users. Аnd something too distracting can make users forget about their main intention – to make a purchase.
• The absence of pause, stop or hide buttons. The presence of a video may complicate the structure of your website. That’s why users should always be able to hide or stop the video and easily move on through the funnel.

How to Add a Background Video to Your Website

Basically, there can be several ways to add a background video to your website:

• Add background video HTML CSS to a ready-made website. You should ask your development company to make this addition since sometimes it can be difficult to deal with code created by somebody else.Here is a great video about How To Add a Video Background with HTML & CSS

• If you’re going to create a website and want to do as much as you can on your own, you should choose a website builder that provides a suitable template. That way, it will be easy to embed a background video following the associated instructions.
• If your website is created on WordPress, you should either add a special plugin or switch to a theme that’s designed for background video implementation.

Conclusion

Background videos are powerful and engaging when they are created professionally and used at the right time and place. They’ll work for your benefit only when they are properly embedded into the sales funnel and have a clear marketing goal. That’s why it’s wise to work with a video production company, get a competent consultation on whether your website really needs it, and only then launch a new background video supported website design.