Versions Compared

Version Old Version 6 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of ContentsminLevel1maxLevel2typeflatseparatorpipe
Panel
panelIconId293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:Figma:
panelIconText:Figma:
bgColor#F4F5F7

Figma component

Panel
panelIconId1f517efa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:linkStorybook:
panelIconText🔗:Storybook:
bgColor#F4F5F7

Figma component link

Panel
panelIconId1f517
panelIcon:link:
panelIconText🔗
bgColor#F4F5F7

Storybook componentStorybook component

The Video component is an advanced media component that provides the functionality to play back and interact with digital video data from different media sources.

Table of Contents
minLevel1
maxLevel2
indent0
stylecircle
separatorpipe

Usage

Tip

Do’s

  • Be mindful of the video length.

  • Use videos when the subject is too complex to write about clearly.

  • Use videos for short instructional information.

  • Include a transcript of the video content for users who cannot view the video

Warning

Dont’s

  • Don’t overdo it. Use videos sparingly to really make a point or showcase a feature.

  • Don’t automatically play video or audio when the page loads.

  • Don’t put important information in video format without featuring it elsewhere.

Anatomy

Image Added

Item

Component type

Content type

Notes

1

Video cover

Image

PNG, JPG

Status
colourRed
titleMandatory

2

Play button

n/a

Text

Status
colourRed
titleMandatory

3

Transcript

Disclosure

RTE

Status
colourRed
titleMandatory

4

No-JS notification

n/a

Text

Status
colourRed
titleMandatory

5

Timestamp

n/a

Text

Not yet released

Visual style

This component has two modes:

  • Default - Works with your default colour palette.

  • Inverse - Works with your inverse colour palette.

Editorial

  • You can include a transcript of the video using the transcript space provided.

Behaviour

Supported video providers:

  • Youtube

Progressive enhancement:

If JavaScript doesn’t load, the visitor will be shown a message informing them that the content is unavailable and they’ll be provided with a link the original content host.

If JavaScript is enabled, the visitor can click or tab onto the whole video cover image and clicking/pressing enter will play the video.

Once the video is loaded, Youtube’s controls will be available.

Privacy:

youtube-nocookie is the default cookie option loaded to prevent unnecessary tracking.

Parameters

A queryParams prop is provided for you to customise your YouTube player with Youtube’s queryParameters.

We recommend setting these parameters:

  • modestBrandin - Controls whether the player is YouTube branded.

  • color - Controls the colour of the progress bar.

    • The only options are “red” | “white”.

Accessibility

  • We recommend you provide a full transcript of the video using the transcript space provided.

  • This component is fully keyboard accessible.

  • While this component has been design to be as accessible as possible, there are many accessibility issues with embedding content. It’s worth considering if embedding media content is absolutely necessary. If developing a site with this component it’s worth reading about accessibility issues with embedded media to see if you can mitigate any of them during the design and development phase of your build.