Brief: Video v. 0.1 [Component]

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

Usage

Do’s

• X

• X 

Dont’s 

• X

• X 

Anatomy

Open

Key Content  

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 cookies

  • The default is to load youtube-nocookie

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

Editorial 

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

Accessibility 

• Standard keyboard accessible behaviour is expected when interacting with the button and video

• Please see https://www.visionaustralia.org/services/digital-access/blog/embedded-youtube-and-google-maps for some considerations relating to the embedding and whether we can address any of them.

• A transcript will be provided by the content editors.

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

Useful links

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