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: Embed YouTube videos without cookies

• YouTube Embedded Player Parameters
  YouTube Embedded Players and Player Parameters  |  YouTube IFrame Player API  |  Google for Developers

  • 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 Embedded YouTube and Google Maps – are they accessible? | Vision Australia. Blindness and low vision services 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

Embed YouTube videos without cookies

YouTube Embedded Players and Player Parameters  |  YouTube IFrame Player API  |  Google for Developers

Embedded YouTube and Google Maps – are they accessible? | Vision Australia. Blindness and low vision services