- Taxonomic name: M-HERO-VIDEO
- Extension: HEROES
- Added on: v3.1.0 (08/12/17)
- Updated on: v5.11.0 (07/09/21)
Video hero banner
Hero videos extend standard hero usage by incorporating short moving loops of video to help communicate the personality of your brand and can be a good way to add emotional impact.
Design and usage
These are essentially heroes with moving images, so all points regarding standard hero banners applies to video heroes as well.
- Hero videos should only be used on home pages or product/landing pages rather than deeper level content.
- Headlines and sub headers become centred and bottom-aligned at a mobile view.
- No more than one primary call to action and one secondary call to action (either secondary button or link) should be used within a hero banner.
- Be aware of page weight and load times - when using video in heroes, be sure to restrict use of other rich content such as carousels, large images and so on.
Video lengths and sizes
Videos used in heroes should be short loops only, with a minimum duration of five seconds and a maximum of 15 seconds.
When using video heroes, two sizes of video are require; the first, default, video should be no greater than 2mb, with the second, served for desktop machines only, no greater than 4mb.
Further details of video formats, sizes and fallback image requirements are available under the code section.
Poster images
Although HTML5 video allows the first frame to be used as a fallback image should the rest of the video not load, each video should have an accompanying poster image attached to it for older browsers which do not support this format.
To support older browsers which may not interpret HTML5 correctly, the poster image should also be included as an inline image in a div immediately following the video element.
Always use 16:9 ratio, image size of 3200px wide x 1800px high for the default image to ensure full browser compatibility.
See standard hero banner documentation for further details.
Examples
Interactive example
Code example
<div class="m-hero-wrapper">
<div class="m-hero m-hero--objectfit m-hero-video [ Modifier ] t-accent-dark [ Modifier ] data-module="m-hero-video">
<video class="m-hero-video__video" poster="./v.2023.01/shared/assets/themes-icons/v2/[ organisation ]/[ theme name ]/placeholder/transparent-16-9.svg" loop muted playsinline>
<source src="..." data-large="..." type="video/mp4" />
</video>
<picture class="m-hero__image">
<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
...
<source type="image/webp" srcset="..." width="..." height="..." />
<img src="..." decoding="async" width="..." height="..." alt="" />
</picture>
<!-- Insert optional breadcrumb here -->
<div class="m-hero-message">
<div class="m-hero-message__text ">
<h1 class="a-heading a-heading--0 a-heading--semibold">...</h1>
<p class="a-heading a-heading--2 a-heading--light">...</p>
</div>
<div class="m-hero-message__button">
<ul class="m-button-group">
<li class="m-button-group__item">
<button class="a-button a-button--primary">...<span class="u-hidden--visually">...</span></button>
</li>
<li class="m-button-group__item">
<button class="a-button a-button--secondary">...<span class="u-hidden--visually">...</span></button>
</li>
</ul>
</div>
</div>
</div>
</div>An example of the full poster image path would be /assets/themes-icons/v2/aviva/default/placeholder/transparent-16-9.svg.
With video disabled at mobile
For use when the video is not suitible for display at small screens, falling back to a standard hero at mobile.
Interactive example
Code example
<div class="m-hero-wrapper">
<div class="m-hero m-hero--objectfit m-hero-video m-hero-video--not-mobile [ Modifier ] t-accent-dark [ Modifier ] data-module="m-hero-video">
<video class="m-hero-video__video" poster="./v.2023.01/shared/assets/themes-icons/v2/[ organisation ]/[ theme name ]/placeholder/transparent-16-9.svg" loop muted playsinline>
<source src="..." data-large="..." type="video/mp4" />
</video>
<picture class="m-hero__image">
<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
...
<source type="image/webp" srcset="..." width="..." height="..." />
<img src="..." decoding="async" width="..." height="..." alt="" />
</picture>
<!-- Insert optional breadcrumb here -->
<div class="m-hero-message">
<div class="m-hero-message__text ">
<h1 class="a-heading a-heading--0 a-heading--semibold">...</h1>
<p class="a-heading a-heading--2 a-heading--light">...</p>
</div>
<div class="m-hero-message__button">
<ul class="m-button-group">
<li class="m-button-group__item">
<button class="a-button a-button--primary">...<span class="u-hidden--visually">...</span></button>
</li>
<li class="m-button-group__item">
<button class="a-button a-button--secondary">...<span class="u-hidden--visually">...</span></button>
</li>
</ul>
</div>
</div>
</div>
</div>An example of the full poster image path would be /assets/themes-icons/v2/aviva/default/placeholder/transparent-16-9.svg.
Development and test
Notes for developers
Video lengths and sizes
Videos used in heroes should be short loops only, with a minimum duration of five seconds and a maximum of 15 seconds.
When using video heroes, two sizes of video are required; the first, default, video should be no greater than 2mb, with the second, served for desktop machines only (included via a data attribute on the video source), no greater than 4mb.
Videos can be compressed using the free application.
Settings for the default video (max 2mb) should based on the "very fast 720p30" preset, modified to be within an mp4 container with physical dimensions set to 960 x 540px, the "Web Optimized" checkbox selected and any subtitles and audio excluded. A preset settings file can be downloaded and imported into HandBrake (by clicking on Add at the bottom of the presets panel on the right), however be sure to change the Size options on the Picture tab.
Settings for the additional desktop video (max 4mb) should based on the "fast 720p30" preset, again modified to be within an mp4 container but with physical dimensions set to 1280 x 720px, the "Web Optimized" checkbox selected and any subtitles and audio excluded. A preset settings file can be downloaded and imported into HandBrake (by clicking on Add at the bottom of the presets panel on the right), however be sure to change the Size options on the Picture tab.
Poster images
Although HTML5 video allows the first frame to be used as a fallback image should the rest of the video not load, each video should have an accompanying poster image attached to it for older browsers which do not support this format.
To support older browsers which may not interpret HTML5 correctly, the poster image should also be included as an inline image in a div immediately following the video element.
Always use 16:9 ratio, image size of 3200px wide x 1800px high for the default image to ensure full browser compatibility.
See standard hero banner documentation for further details.
Message
Always use class .a-heading--0 for the title heading of the hero message.
Visible labels and accessible names
When a button within a hero needs to be more descriptive of what it is or where it is going, but there is a requirement to show simplified text, then an extra span with the class u-hidden--visually is required within the a tag to hold the hidden text required to make the accessible name for the label meaningful to screen readers. The visible label should always come first, with the hidden text following on to extend this by adding meaning and context, for example:
<button class="a-button a-button--primary" href="...">Find out more<span class="u-hidden--visually"> about car insurance</span></button>This also helps to ensure that all buttons and links are unique through the page, rather than having multiple instances of links simply saying "Read more".
Extension component
This component forms part of the 'heroes' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/heroes.css" rel="stylesheet" />Notes for testers
- Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
- Ensure that when hovering over a link the style changes noticeably.
- Ensure that when a link has focus the style changes noticeably.
- Ensure that text within links is descriptive of what or where the link is going. Additional descriptive text can be hidden visually from the user to aid in make the link understandable especially if there area number of links such as "Find out more" on the page which go to different locations.
- Use a screen reader to confirm that the links are understandable.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-hero-wrapper |
Base style wrapping container for a hero banner | Yes | div |
Fixes the min-height bug in IE10-11 |
.m-hero |
Base style for hero banner with vertically and horizontally centred hero message, no image focus | Yes | .m-hero-wrapper > div |
Hero image has centred responsive scaling |
.m-hero--no-gradient |
Modifier to remove the dark gradient from behind the breadcrumb where the hero image offers enough contrast at any screen size | .m-hero |
||
.m-hero-video |
Modifier for video heroes | Yes | .m-hero |
|
.m-hero-video--not-mobile |
Optional modifier for video heroes to disable the video at mobile breakpoint only | .m-hero-video |
||
.m-hero-video__video |
Modifier class for the actual hero video | Yes | .m-hero-video > video |
|
.m-hero-video__video--left |
Modifier class to anchor the video to the left (and crop in from the right) | .m-hero-video__video |
||
.m-hero-video__video--right |
Modifier class to anchor the video to the right (and crop in from the left) | .m-hero-video__video |
||
.m-hero__image |
Class for inline fallback image | Yes | .m-hero > div |
|
.m-hero-message |
Container for hero content | Yes | .m-hero > div |
|
.m-hero-message__text |
Container for hero message text | Yes | .m-hero-message > div |
|
m-hero-message__button |
Container for buttons to come after the hero message | Yes | .m-hero-message__text + div |
Only include if a button is required |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the link clearly visually different so that the focus point on the page is obvious to the user
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the relevant page.
Component releases
- Added on: v3.1.0 (08/12/17)
- Updated on: v5.11.0 (07/09/21)
Latest update:
- Ability to disable the video at mobile, falling back to a standard hero banner, for when the video hero is not appropriate for small screens. This is acheived by the addtion of the modifier class
m-hero-video--not-mobile. - updated: To improve user experience, we now recommend that the
autoplayattribute is no longer included; this ensures that motion preferences are guaranteed to be upheld, as well as having the added benefit of the video quality being updated prior to the video playing. The poster image should also now be a transparent svg rather than an image from the video, allowing for appropriate sized hero image to be displayed while the video is loading, when animation is turned off, or when JavaScript is not available.