/
Video

*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *

Video

Owned by Nick Harris
Last updated: Sept 02, 2022
2 min read

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.

Usage

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

Anatomy

 

Item

Component type

Content type

Notes

 

Item

Component type

Content type

Notes

1

Video cover

Image

PNG, JPG

Mandatory

2

Play button

n/a

Text

Mandatory

3

Transcript

Disclosure

RTE

Mandatory

4

No-JS notification

n/a

Text

Mandatory

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.