The Video Banner component allows you to insert self-hosted videos anywhere on a page. These videos can be customised with various widths and alignments, and administrators have the flexibility to adjust the roundedness of each corner independently for desktop and mobile views, offering a truly customisable design.
This component offers several configuration options, divided into the following categories:
| Settings |
This section includes general settings that apply to all components within the system:
- Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
- Desktop/Mobile Padding: Adjust the top and bottom padding for both desktop and mobile views.
- Section Background Colour: Choose a background colour from a pre-configured list of brand colours.
- Section Width: Set the width and alignment of the video banner’s container.
|
| Animation |
Administrators can select from seven entrance animation options for the video banner:
- None
- Slide in from the top
- Slide in from the bottom
- Slide in from the left
- Slide in from the right
- Fade in
- Grow in
|
| Pod Styling |
This section provides options to customise the appearance of the video pod:
- Desktop and Mobile Roundedness: Set the roundedness for each of the video’s corners independently for both desktop and mobile views.
- Full Width: Choose whether the video banner should stretch to the full width of the browser or remain within a fixed grid. To make the image hug both the left and right browser edges, enable this option and set Section Width (in the settings tab) to ‘Widest.’ If another Section Width value is selected, the width will be calculated as a percentage of the browser’s width.
|
| Content |
Administrators can manage the video content and display settings in this section. Available fields include:
- Poster Image: Upload a poster image that will be displayed before the video loads. A 16:9 aspect ratio is recommended but not enforced.
- WebM Video: Upload the WebM format of the video. WebM offers superior compression and is supported by most modern browsers.
- MP4 Video: Upload the MP4 format of the video. While MP4 offers poorer compression, it is widely supported by older browsers.
- Autoplay Video: Enable or disable autoplay. Note that most browsers only allow autoplay for muted videos.
- Mute Video: Decide whether the video should be muted, regardless of whether autoplay is enabled.
- Loop Video: Set whether the video should loop continuously or freeze on the final frame when it ends.
|
You can view examples of Video Banners in various styles and animations here.
