ns-video
Introduction#
A video allows British Gas to share more visual and engaging content.
British Gas creates many videos to engage customers. This component allows having these videos on the website and gives better context to the customer about what, how or why they should do something.
Best practice#
| 💚 Do's | 💔 Dont's |
|---|---|
| Use videos from Centrica YouTube channels | Use over 3 videos on a page |
| Use inside another component (see relationship) | Use video as the primary content |
| Use as supplementary content |
Considerations of best practices#
- The ratio is not related to (or affect) the ratio of the video. Changing the ratio should be used to allow the video player to fit better inside its parent component.
- Make sure that the video has closed caption, a good title and useful thumbnail.
Usage#
Component placement#
The ns-video component can be used in the following components:
Specification#
| Attribute | Type | Default | Options | Description |
|---|---|---|---|---|
id | string | Can be found in the YouTube video URL under vparameter | ||
ratio | string | 16 / 9 | 16 / 9, 4 / 3, 1 / 1 | Ratio of the video player |
title | string | YouTube video | The YouTube iframe title |
Specification notes#
Title#
- This is required for accessibility. The title should be unique. If there are multiple videos on the page, they should all have different titles (even if they are the same video).
Feedback#
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
💩 🎉 🦄 You can also contact the team on Slack on the product-nucleus channel!