Hero-Full Width Video

Give your page a strong introduction

Best practice demo

Maximum five-word H1 heading

Add an aspirational message, within ten words

Usage guidance

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

Large video files can reduce page speed. When a page takes a long time to load, both user experience and SEO performance will suffer. So it’s important to make video files as small as possible.

The maximum video file size you should upload is 10MB. But the smaller you can make it, the better.

Follow these five tips to make sure your video file is small enough:

  1. The length must be a maximum of ten seconds
  2. Stick to dimensions of 1600px X 1600px
  3. Set the resolution to 72dpi
  4. Remove any audio
  5. Compress the video before uploading
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.