Page Properties | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
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. | ||
|
|
|
Key Content
Item | Type | Notes | ||
---|---|---|---|---|
3. | Text / Rich-text |
| ||
|
|
|
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_parametersSafe 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.
...
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 ad and whether we can address any of them.
A transcript will be provided by the content editors.
...
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
...