Skip to main content

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 channelsUse 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#

View example on Storybook

Component placement#

The ns-video component can be used in the following components:

Specification#

AttributeTypeDefaultOptionsDescription
idstringCan be found in the YouTube video URL under vparameter
ratiostring16 / 916 / 9, 4 / 3, 1 / 1Ratio of the video player
titlestringYouTube videoThe 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!

Related links#