Video
The Video component section can be either constrained by the width of the grid or a full width section. It includes a video and caption and can be customised as described in the specification tab below.
- Design overview
- Specification
- Style Guide Manager
- Examples in-situ
- Usage
Specification
This provides guidance on the build, layout and content options for this component.
Layout specification
| Component item | Requirement & purpose | Optional or mandatory | CMS options |
|---|---|---|---|
| Height | Expands based on size of the video. | n/a | n/a |
| Width | The video is contained by the grid width. | n/a | n/a |
| Content alignment | Controls alignment of the caption. | Mandatory | Left, centre or right. |
| Full border | Allows a full width border to be added to the component. | Optional | On/off. |
| Full border width | Sets the border width. | Optional | Add a px value. |
| Full border colour | Sets the border colour. | Optional | Choose from colour palette. |
| Border bottom | Allows a boxed width border to be added to the bottom of the component. | Optional | Select border colour and width. |
| Border bottom width | Sets the border width. | Optional | Add a px value. |
| Border bottom colour | Sets the border colour. | Optional | Choose from colour palette. |
| Margin bottom | Allows control of the spacing below the component. set globally via the SGM. | Mandatory | Large, medium, small or none. |
| Media width (for mobile) | Allows opting for a full width image/video which extends full screen width in mobile | Optional | Full width or boxed width. |
| Poster image | Allows user to set a background image. | Mandatory | Image uploader |
| Lazy Load Video Poster | To improve the performance. | Optional | On/Off |
| Video URL | Allows user to set a Vimeo or YouTube video URL. | Mandatory | Video URL input. |
| Video caption text | Allows user to add a caption. | Optional | Text input. |
| Video caption colour | This is the small paragraph text style. | Optional | Choose from colour palette. |
| Video caption text size | This is the small paragraph text style. | n/a | n/a |
| Video caption text spacing | Should be 16px margin between image and caption, 24px margin left/right. | n/a | n/a |
Interaction
These are the interactive aspects of the component.
Animation Container
| Select animation | Allow user to select animation from the drop-down list. | Optional | Select list |
|---|---|---|---|
| Duration | Set how long in seconds the animation will take to run | Required | Numeric Input |
| Delay | Set a start delay on the animation in seconds | Optional | Numeric Input |
| Iteration | Set the number of times the animation should run | Optional | Numeric Input (Maximum two) |
| offset | Set the animation to start at a specific offset before or after the element has entered the view port | Optional | Numeric Input (Pixel) |
| Interaction |
|---|
| User can play and pause video. |
| User can adjust volume. |
There are no style guide settings for this component.
