How to...Video Marketing

10 Rules to make the best and most efficient homepage video background

The first impression of visitors on your site is crucial to convert them into your Clients. Engage them since the first seconds, grab their attention with style and without pressure, deliver the right message is the most challenging task for your web site. And homepage background video can really help.

You will never get a second chance to make a first impression

Will Rogers,
American actor, humorist, newspaper columnist

Background video is about a great first impression. Now it’s one of the popular trends now in web design. Digital marketers admit that this approach makes webpages look more attractive, live and modern compared to the static images. More important, adding background video may increase your conversion rate +138% or at least 2,38 times (look at excellent A/B testing experiment with adding a background video to the homepage). Even if you have gain extra 10-20% of engagement and conversion, this could be the best marketing investment in your digital strategy.

Our 10 Rules based on real cases and our own experience will help you to extract maximum from adding background video.

How to make the best video marketing investment – just 10 rules to follow

Rule #1 Use only relevant videos

The clip you place on your homepage should maintain the message and show what is your company/service/product about.
Beautiful but irrelevant videos create the mess in the head of a visitor. And definitely downgrade engagement and intention to go deeper on your site.

An excellent example of the power of background video from Powerhouse Company

Powerhouse Company decided to demonstrate the creative process and to introduce their works using background video. Amazing impression. The video is relevant, beautiful with smooth transitions and definitely tells a story. One of the best example of homepage clip. And time when site is downloaded and starting show video is very short.

Rule #2 Don’t disrupt the focus on the main message

If your homepage contains other elements like text with the main message, make sure that they do not compete with the background video. At least the main message should win in this competition. In order to give it a good chance to win in this visitor’s attention battle you can to increase the font size, using contrasting font colours for your message and use shadowing overlays to make video less catching but still clearly visible to the visitors.

Interesting example with background video in the hotel industry from Contemporary Hotels, Australia

Background video itself is rather good. But main message is not very easy to read and video completely ‘steals’ visitor attention. Which is not great.

Rule #3 Optimise your video to reduce the file size

Nobody wants to wait 15 seconds to see the beauty of your visuals. After 5 seconds of downloading visitor is losing passion. Biggest excuse not to have a video on a site is that it will slow it down. But it’s easy to manage this issue. Don’t use long videos. Optimal length is between 15 and 30 seconds. Optimise the format of downloading using the most compact format – mp4. Don’t use 4K or 2K videos.
If you do it right then the size of your video will be no more then 7-10 Mb. It’s a size of one or two high-quality static images.

Easy rules to optimise size of file for video will not affect download speed of your site. But make first impression and visitor experience much greater
Great example with background video from US-based construction company Thorsen

This example demonstrates how this tip can be performed. We see the main elements of the company’s philosophy and objects, while the page is loading as usual, even on mobile.

Rule #4 Don’t think about sound

Forget about sound. It’s not working for background video. Moreover, it can distract your visitors with something unexpected even if it’s a wonderful melody. A significant part of your traffic is mobile where iOS is simply mute sound automatically. It means that 50% of your visitor will not have a chance to hear, another 50% could be under stress after unexpected sound when they go on your site.

Create video working without sound.

John Dory

This restaurant website has a dynamic homepage background video that can attract even without music or sounds. However, there is an option to turn the music on, using the hidden button. But according to our experience, hardly anyone will use it.

Rule #5 Use high-quality videos

This may seem obvious, but many websites suffer from low-quality videos. In some cases, this may be resulted by the goal to ensure high loading speed of the page. But often this is just a sign of incompetence and lack of experience. But keep in mind, that even with a restricted budget you can get a quality video, so there are no reasons to add a low-quality one.

Riello Sistemi

This is not the example to follow, though. Despite the fact, that website designers have added a short and relevant video, they did not pay attention to its quality. We can see a low resolution of the clip and this fact can really spoil the general impression of the page.

Rule #6 Do not add video controls

They simply ruin the idea of homepage videos. Do not confuse this design element with a video player. However, if you want to add some informative video, do not make them background ones, but as a part of the usual layout.


See, how distractive it can be in this example? Instead of discovering the website, we have to drag or click on something to launch the element of website design.

Rule #7 Use smooth videos

Visitors can be distracted not only with sounds or controls but also with a too dynamic background. Flickering videos in most cases annoy and steal the attention from the page in general. On the contrary, smooth clips with close-ups are welcomed. It is pleasant to the human eye to watch such videos.

Brave People

This is an example of a smooth background that remains a bit dynamic, but still, do not flicker.

Rule #8 Think about mobile

Another obvious tip that, however, can be sometimes ignored. There is no need to remind you about the role of mobile devices in our lives. So if you want to provide an impressive and pleasant experience to every potential visitor, make sure your website has a mobile version with working video background as well.

Citrine Estates

This is a great example of a background video. It loads fast, delivers a message, does not compete with other content and, what is more important, plays in a mobile version of the website.

Rule #9 Don’t overpay for your background video

Don’t kill your best marketing investment with too expensive video. You can entrust the creation of the background video to the professionals, who know how to use your own footage to compose a real story for your website. Web-design should not be expensive if you know the right approach to it.

Rule #10 Enjoy your website and get more customers

This is not an actual tip, but a sign of a well-done job. You should like your website designs as well as your customers and visitors because this is also your workplace. People love beautiful things and pay more attention to the nice websites. So do you. If you love your background video, you will get even more pleasure from your work and its results.

As this is our job to make videos, we have tried to implement all the tips above in our own background video. The home page demonstrates our main objectives: marketing videos. The clip is smooth, soundless and of the high quality. But we know, that we always can make it better.

You can truly enhance the impression and conversion of your website by adding a background video to it. Follow the Rules and make it much easier, cheaper and more effective
Related posts
How to...Social Media

Best App for sharing media

TrendsVideo Marketing

Video Marketing Sells: 7 Magic Statistics to Prove It

How to...Sales & MarketingVideo Marketing

Digital Marketing Crisis in the B2B Segment and 3 Tips to Overcome it

How to...Sales & Marketing

How to Reduce Advertising Costs by 20% in 10 Minutes

Leave a Reply

Your e-mail address will not be published. Required fields are marked *