Versions Compared

Version Old Version 1 New Version 2
Changes made by

Sergiy Nalyvayko

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

X

...

Page Properties

Component type

BlockComponent

Document status

Status
colourRedYellow
titleDRAFTIN-PROGRESS

Design source (in Figma)

Author

Nick Harris

Responsible

Milestone

3

Component Description

Use When 

  • X

  • X 

Don’t Use When 

  • X

  • X 

Related/Similar Components 

  • X 

  • X 

Key Content  

...

Item 

...

Type 

...

Notes 

...

 

...

 

 *Notes 

Visual Style 

X

Anatomy

...

Item

...

Type

...

Notes

...

1.

...

2.

Behaviour 

Progressive enhancement:

  • Non JS

  • JS

Editorial 

  • X

  • X

  • X

Accessibility 

...

Key

...

Interaction

  • Aria considerations

  • etc

Analytics & Data 

  • X

  • X

Future Expansion 

4

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

Info

It’s worth thinking at this point about whether we need a larger “media embed“ component that allows the embedding of media from third parties. MVP is still video but in the future we could extend to twitter cards, pinterest, and other video providers. Does this future impact what we do now? Can we set the foundations in this component?

Note

Carousel variant of Video is out of scope for MVP

Note

YouTube is the only supported 3rd party provider for MVP

Usage

Info

I’m not going to write Do’s and Don’t at this stage. This isn’t necessary for the initial brief.

Do’s

  • X

  • X 

Dont’s 

  • X

  • X 

Anatomy

...

Item

Component / type

Notes

1

Image

To be provided or to be pulled in from Youtube API (cover image)

2

Button

3

Disclosure

Design doesn’t match.

4

Unknown

It’s text but it’s new to the DS so far.

Key Content  

Item

Type

Notes

3.

Text / Rich-text

  • The label could be pulled form a central dictionary.

  • The contents will be provided in the CMS. Needs to be rendered as rick-text.

4.

Video length

Pulled from YouTube API

Related/Similar Components 

  • Image

  • Carousel  

Behaviour 

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.

      • Open in a new tab

    • Ben to design UI for the non JS fallback

  • JS

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

  • Cookies

    • No Cookie

      • The video URL should load “https://www.youtube-nocookie.com/embed/XXX” instead of the original URL.

      • There are additional considerations here so please do some research and suggest the way to handle this. This is a good article on what youtube-nocookie does and why it still does’t meet data privacy laws: https://axbom.com/embed-youtube-videos-without-cookies/

  • YouTube Embedded Player Parameters
    https://developers.google.com/youtube/player_parameters

    • Safe mode

    • modestBranding

      • Controls whether the player is YouTube branded.

    • color

      • Controls the colour of the progress bar.

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

        • We’ll use white as default but for brands who’s primary brand colour is red it would be good to use this option.

Note

This is not the full list of parameters needed - Just the ones we want to specifically call out.

Editorial 

  • Transcripts will be provided by the content editors in the CMS. Initially this is rich text. See below for future considerations.

Accessibility 

Analytics & Data 

  • Basic click tracking - which I assume can be called by the onClick prop

Future Expansion 

  • Cookies

    • In the future we can use the user interacting with the video component as a way to trigger a consent modal if they haven’t already consented to cookies.

  • Transcripts

    • We may extend this to be a more rich experience with timestamps and other possible functionality.

  • Embed in other components

    • Other components could be extended to include video support. For example teaser. We will need to provide a way to control the video playback - these probably won’t be youtube videos.

Wider Conversations that may impact this 

  • Item: Description

  • Item: Description Carousel

  • Transcript component

Inspiration from elsewhere 

  • X

  • X

...

Examples

Insert here

https://axbom.com/embed-youtube-videos-without-cookies/

https://developers.google.com/youtube/player_parameters

https://www.visionaustralia.org/services/digital-access/blog/embedded-youtube-and-google-maps