Best Homepage Video Design - Ultimate Guide

Your websites homepage is the shopfront to your business and needs to be at its best.

But why is it so important to get it right?

You have 7 seconds to reassure your visitors that they are in the right place before setting them on a journey to conversion, otherwise they will click off and go else where.

The answer to keeping visitors on for longer is simple...

Video is a winning solution that, if implemented correctly, will see an increase in visitor numbers and conversion rates.

Having video on your websites homepage is the best all-round solution for any business.

There are exceptions, but you should be asking ‘why shouldn’t I have a video on my homepage?’ rather than ‘Why should I have a video on my homepage?’

Getting the design right is not as simple as recording something and embedding it on the homepage. You will need to do a little more research to ensure you have the right design to ensure people watch the video and continue their journey with you.

You’re in the right place with this ultimate guide to the best homepage design with video, where we will take you through everything you need to know to get the best results from your websites homepage design.

In this article, we have complete step-by-step guide to help you get the best performance from your flagship video. To do this we will be looking at researching and designing elements such as the wording, player style, thumbnail images and positioning.

We also have a handy infographic that shows why having a video on your homepage is a winning solution...

Your websites homepage needs video - Infographic

Sources of information:


By now, if not already, you should be convinced that video is a winning medium for your online marketing strategy and will benefit your websites performance. Now you have the stats, let's look at how to implement a video on your homepage.

A step-by-step guide to building a winning homepage video layout.

At first you would think that creating a homepage with a video is simple. Like many, you would spend most of your time creating a great video without thinking about how to implement it on your website. It’s not difficult, but we suggest following these simple steps to get it right the first time…

Having a great video is half of the story! Getting people to watch the video and follow your visitor journey is the other half, which we will explore in this step-by-step guide. We will touch on what type of video to create and what the video requires to work. However, for the most part we will explore the design of the web page to get maximum views and conversions.

1. Research what your visitors are looking for.

The more planning you do, the quicker your design will come together. Before that, we need to know what people are expecting to see and what will get them watching your new video. Having the video automatically play when a visitor lands on the site is not advised and is usually a sure way of increasing bounce rates.

To get the best conversion rates, we need them to start the video themselves by clicking on the thumbnail. To do this we need to learn what people are looking for when visiting your website.

You may wish to take them on another journey from the subject they land on the website looking for, but let your video do this. First, let’s concentrate on getting the video clicks in the first place.

To research why people are clicking on your website, you will need to install some analytics on your site.

Google Analytics
Google analytics provides visitor statistics for your website to see how people interact with your website and which pages they visit. There is a great tool for monitoring visitor journeys. You’re looking for the most popular pages with the lowest bounce rate to know which subjects people are researching.
- https://analytics.google.com/

Google Webmasters
Webmasters is used to index your pages with Google but also has a great keyword search results page. Using webmasters you can see which keywords people are using to find your website. If the majority of searches relate to one subject then it’s a good guess that people will be interested to see a video about that subject.
- https://www.google.com/webmasters/

There are many heatmapping services but our preferred option is Hotjar which has a free option to help you get started. Hotjar shows which buttons and website elements get the most interactions. Monitoring how people interact with your website is essential to discovering what people are looking for and helping to provide the relevant information.
- https://www.hotjar.com/

What you're looking for in the analytics

These platforms will give you a great insight into how people interact with your website to help you design a winning homepage layout. Take note of images that people click on and headings people engage with the most. Replicate success on your website such as using the images people click on the most as your thumbnail, or the text from buttons people engage with most.

Now you know why people are visiting your website and what they’re looking for, you can start to put a plan together for the design.

2. Design the homepage layout

Your visitor’s eyes should be drawn to the videos thumbnail encouraging them to click play. This means that the page design should be branded and attractive, but not attention seeking. Don’t clutter your webpage with images and buttons that distract from the main aim of getting people to watch your video.

Your video should be positioned with prominence at the top of the page on both mobile and desktops with only your logo and menu above it. You may want to have a title above the video but keep it short. The videos thumbnail is what we would like people to see and click on, not the content. This should all be in view of the browser without having to scroll. This is called above the fold content.

When watching the video, people’s eyes will wander around the page. You want to show the next step of their journey in the form of a button or two, plus some useful information, without distracting from the video’s content. Keep sentences short and simple using bullet point and simple iconography to enhance the videos content.

The video thumbnail

Probably the most important part of the design is having the right thumbnail. We have seen a sharp change in visitors watching videos based purely on the thumbnail design. This is where we go back to our research to see why people are visiting your website. If people are clicking on your website looking for dogs then the thumbnail should have pictures of dogs on it, not cats. If you would prefer to be selling cats then tell them in the video, but let’s get them clicking on the video first.

Power-words are also great for video thumbnails getting that extra amount of click rates. These are words that are not typically searched for but can be picked up by our subconscious, encouraging us to click. Power-words typically imply speed, convenience and quality. Words such as ‘Fast’, ‘Best’, ‘Next Day’, ‘Simple’, 'Comprehensive' or ‘Winning’ are all great power-words.

For example, the title for this article starts with ‘Best’, which is not necessarily going to be searched for. However, it does help it stand out from other blogs titled ‘Homepage Design with Video’.

Keywords for video are the same. If they visit your website searching for dogs then have the word ‘dog’ on the thumbnail but also power-words such as ‘Friendly Dogs’ to get those extra clicks.

3. Build the homepage and select a video platform

This step changes depending on the system you’re using. For the layout, we suggest handing over the coding to a professional to make sure everything is efficient to gets the best results. The developer should ensure ensure the video is mobile responsive by using html frameworks such as Bootstrap and Foundation.

Your website may be built on a template that allows you to implement a video on the homepage nicely. You should consult the website provider to see what your best options are.

Choosing the right video platform however, is something you can easily do yourself. There are two main options here with their own pros and cons...

Option 1: Hosted externally

This option includes services requires using services such as Youtube, Vimeo, Wistia and Brightcove to host your videos.

With these services, you will not need to worry about bandwidth, storage or uptime. If your video is a viral hit, your website is less likely to go down. There are usually great analytics with these options to help you get the most from your video.

You will also have the added bonus that your video will be tapped into a very large network or users. Remember that YouTube is the 2nd largest search engine after Google!

The downside to these services is that you have to use their media players which are mostly branded and have limited features. If you would like the video to use a white-label player, you will have to subscribe to a premium package.

Option 2: Self hosted

You can host the video on your own server and use the browsers player which is great if you don’t want someone else’s logo on your websites homepage. You can also add JavaScript players to add functionality which is recommended as the players provided by browsers are all different.

Watch out for hosting space and bandwidth! Hosting your video on your server could mean you reach your bandwidth limits taking down your website. This is not ideal of your homepage video goes viral.

You will also need someone with experience of code to implement this option. If you decide this option is your preferred route than make sure you have compressed all your video files and that the server provides mp4, webm and ogg file formats.

For most applications we suggest using option 1 unless you would prefer to do it yourself with a completely customised video player.

How to improve your video homepage

Now you have your homepage with video taking pride of place, you can monitor visitor interaction using Google Analytics and Hotjar heatmapping. Don't be afraid to try different thumbnails and alter the layout slightly to maximise conversion.

We will be updating this post with examples of homepages that use video for inspiration. Over time we will also include further steps to help you get the most from your website.

Please follow us on social media and leave comments to help us improve this article. We will also update you with changes.

It's not all about ranking #1 on Google

Aiming to rank #1 on Google for a specific term, or even, a handful of terms, is a waste of yours and everyone’s time. We will show you where it's at

Level up to AMP

Examples of super fast AMP designed websites, and how you can make AMP work for your business, with no sacrifice to style

Why use accelerated mobile pages (AMP)?

There are many benefits to using Accelerated Mobile Pages (AMP) for your next website. AMP is a method of creating very efficient, fast loading HTML which is proven to increase traffic and session duration.