Guidelines for a good hero video

12 November 2024 | Pascal Vleugels | |

A video in your hero section immediately grabs attention and can convey a great deal of atmosphere and information in just a few seconds. But how do you ensure that a hero video looks good on both desktop and mobile?

These guidelines will help you get the most out of your video.

1. Use the correct dimensions

For the best results, we recommend using separate videos for desktop and mobile.

Desktop: 2560 × 1440 pixels

For desktop use, use a video in landscape format: wider than it is tall.

We recommend a resolution of 2560 × 1440 pixels (1440p). This ensures the video remains sharp even on larger screens, without you having to work directly with large 4K files.

Recommendation: please film or export your source material in at least 1440p.

Mobile: 1080 × 1920 pixels

For mobile use, please use a video in portrait format: taller than it is wide.

A resolution of 1080 × 1920 pixels (Full HD) is usually more than sufficient for mobile devices.

2. Take cropping into account

A hero section scales to fit different screen sizes. As a result, parts of your video may be cut off. The best cropping depends on where your title and other text are positioned within the hero section.

That is why it is important to maintain sufficient safe space around your main subject.

Desktop

Ideally, do not place important people, products or other visual elements right at the left or right edge of the image. On narrower screens, these parts may be cropped out.

For example, is your hero’s title on the left? If so, ensure there is sufficient negative space in the video so that text and images do not clash.

Tip: position the main subject as close to the centre of the frame as possible.

Mobile

On mobile devices, the right-hand side of the video may be cut off at the top and bottom. Therefore, do not place important information too close to the edges.

Also bear in mind the position of the title. Is it, for example, at the bottom of the hero section? If so, ensure that this part of the video is calm enough to keep the text clearly legible.

3. Keep the video short

A hero video is designed to grab attention quickly. Visitors usually only watch a small part of the video before scrolling on.

So make sure something interesting happens within the first 2 to 3 seconds.

Desktop: maximum 10 seconds

For desktop, we recommend a video of no more than 10 seconds.

Mobile: maximum 7 seconds

On mobile, it should be a bit shorter: keep it to a maximum of 7 seconds here.

Try not to let the video loop endlessly. Constant movement can become jarring and distract from the page’s content. A calm final still image can therefore be a good alternative.

General tips

Ensure the video complements the page. Don’t just choose attractive footage; choose footage that genuinely adds value to the subject.
People create a sense of recognition. Images of nature and atmosphere can be stunning, but featuring people in a video often makes it more personal and relatable.
Keep the main subject in the centre. This prevents it from being cut off on certain screen sizes.
Consider the text in your hero section. Ensure there is sufficient white space around titles and other text so that they remain easy to read.
Get off to a strong start. Don’t wait five seconds for something to happen: the first few seconds are the most important.

In short

A good hero video should be: short, focused, relevant and built up gradually. Use different formats for desktop and mobile, keep key subjects away from the edges of the frame and ensure the video grabs the viewer’s attention from the very first moment.