Hero-Full Width Video

Give your page a strong introduction

Demo - Maximum five-word H1 heading

Add an aspirational message, within ten words

Overview

Give your page a strong introduction 

Videos help to generate an emotional response and bring excitement to your page.

Hero banners help both users and search engines to understand your page. The large heading – identical to your page title – reassures users that they’re in the right place. Meanwhile, the built-in H1 tag tells search engine bots what the content is about.

Hero-Full Width Video works well for many different content types. Here’s how to get the most out of it.

How to use it

Step 1: Add the heading

Your heading – the H1 in this case – must be the same as your page title (not to be confused with the SEO title). This might be a product, sector, or headline.

Headings must not occupy two full lines in this component, as it reduces readability. Use a maximum of 35 characters.

Optional step: Add a subheading

Add an optional subheading to support your heading with an aspirational or complementary message. Make sure that your subheading doesn’t go onto a second line (fewer than ten words or 50 characters).  

Step 2: Connect your video

The video loops automatically, providing a seamless stream of footage.

Make sure that your video is no longer than ten seconds. This is because longer videos can reduce page load speed, a key Google ranking factor.

Bear in mind that the upper section of the video will be partially obscured by the main menu navigation. So put the focal point of your video in the centre of the frame.

Step 3: Add a call to action

When setting up a call-to-action button, you first need to have an appropriate form to direct users to. Copy and paste the URL into the ‘CTA link’ text field. Alternatively, search for your form in the CTA link text field and select it from the dropdown menu.

It’s important to use button text that describes the action you want users to take. Click the ‘CTA text’ dropdown to choose from the pre-set options, including:

  • Get in touch
  • Get a quote
  • Request a quote
  • Start assessment
  • Contact us
  • Book a demo
  • Register your interest
  • Read more

Recommended video specifications

We recommend the filesize of the video to be as small as possible, we have given a max filesize of 10Mb but the smaller the better.

Guidance on how to keep the filesize as small as possible:

  • Keep the length of the video to below 10secs, or as short as you can get it.
  • Stick to the 1600 x 1600px dimensions, any larger will impact filesize.
  • The resolution should be 72dpi
  • Remove all audio channels
  • Choose a compression setting that maintains a qood enough quality but brings the filesize down as much as possible (remember these are just background videos and not presentational videos)
FormatOrientationDimensionsFile size    
MP4SquareWidth: 1600px
Height: 1600px
<10Mb

Do's and don'ts

Do

  • Keep videos to a maximum of ten seconds

    This helps to maintain a fast page speed, a key SEO metric. 

Don't

  • Don’t repeat your heading

    Your subheading should complement the heading rather than repeat it.

  • Don’t use the hero banner more than once

    Having a single H1 per page is a fundamental SEO principle.