Adding Video to the Hero

Video Requirements

All necessary requirements for using a background clip as hero media.

• The .mp4 video format is only format currently accepted by desktop.
• Do not use videos which apply letter-boxing.
• Do not use embedded text within the videos.
• Remove sound from the video, sound is disabled by default.
• Add an appropriate hero image as you normally would.
• Ensure videos are short and concise (upto a max of 30s) to cut down loading times.
• Ideally a video should not exceed 10mb.
• Ensure videos transition from the end frame to the start frame in a acceptable manner.

How to?

Use the following steps to add a video background to your hero.

1. Use the new hero page part only when adding a video background clip.
2. Upload the video using the content images section (page media) with a reference of: HeroVideo.
3. Save and preview the page to ensure the hero video is working and looks great.

How Does it Work?

For Mobile

For a mobile device, the video will not load. This is by design and this is because we are unable to tell whether a customer is on a 'good' or a 'bad' connection.

Videos are expensive assets for consumers to load and speed of content consumption (including loading of page assets) can be closely related to customer satisfaction levels. If a video takes too long to load, this can result in a bad user experience.

For Tablet +

For larger tablets and desktop devices the video is loaded as intended as they are more likely to be using these devices with a 'good' internet connection.

The Poster Image

A poster image is the fallback image that is displayed when a video fails to load. This image will be also be the image that is displayed for mobile devices within the hero media. This image is automatically generated when the video is uploaded.

FAQs

Hero Example

An example of a well put together hero using a background video clip.

Any further questions or issues should be forwarded to the New Media Team.