Versions Compared

Key

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

Component type

Component

Document status

Status
colourYellow
titleIN-PROGRESS

Design source (in Figma)

Author

Nick Harris

Responsible

Milestone

4

...

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

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

Warning

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

4.

Video lengthPulled from YouTube API

Warning

Out of scope for MVP

Related/Similar Components 

...

  • 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

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

...

...

  • 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 

...