Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Current »

Component type

Component

Document status

IN-PROGRESS

Design source (in Figma)

Author

Nick Harris

Responsible

Milestone

4

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

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?

Carousel variant of Video is out of scope for MVP

YouTube is the only supported 3rd party provider for MVP

Usage

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

Dont’s 

  • 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

Out of scope for MVP

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 rich-text.

4.

Video length

Out of scope for MVP

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 best 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

    • privacy-enhanced mode: On

    • 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.

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

  • Our solution should be able to utilise the out of the box YouTube video tracking within GTM. This has been an issue in the past where a cover div has blocked the video tracking.

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.

    • This is the concept of “decorative video” which we need to look at, but would probably be a different component (e.g. sound off, looped, pausable video that acts as a background image). Not for MVP.

Wider Conversations that may impact this 

  • 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

  • No labels