/
'Video' component

'Video' component

Owned by Sergiy Nalyvayko (Unlicensed)
Aug 01, 2022
1 min read

Component type

Block

Component possible inclusions

n/a

Design source (in Figma)

Video

Component status

https://rb-digital.atlassian.net/browse/DSD-121

Introduction

The video component provides the functionality to play back and interact with digital video data from different media.

Anatomy

Key Content  

Item 

Type 

Notes 

Cover image

image

To be provided or to be pulled in from YouTube API

Button

component

 

Disclosure

component

 

Editorial 

  • Transcripts will be provided by the content editors in the CMS. Initially this is rich text.

Behavior

  • Progressive enhancement:

    • Non JS

      • A message telling the user that to view this media they need to enable javascript.

      • Provide a link to the embedded video (opens in a new tab).

    • JS

      • Clicking/tapping the play button will hide the button, cover image, and load the embedded video from YouTube

    • Cookies to load youtube-nocookie by default

Usage

Do’s

  • Be mindful of the video length.

Don’ts

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

  • Don’t jar your visitors with automatically playing audio.

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

Analytics & Data 

  • Basic click tracking called by the onClick prop

Related/Similar Components 

  • Image

  • Carousel