[feat] `<rh-video>` element

[markcaron]

We need a new Video element/component with the following criteria:

• Accepts placeholder / thumbnail image (optional)
• Overlays a play button
• Handles cookie consent for YouTube
  • If no, "error messaging" with button to update preferences
  • If yes, plays video from YouTube embed
• Plays video from <video> element (no need for cookie consent)

Mockups

• Video play button
• Cookie consent messaging

[markcaron]

@marionnegp can you provide the assets for this? Seems like there's a logo backdrop behind the cookie consent.

[marionnegp]

@markcaron

[bennypowers]

prior art:

• https://ux.redhat.com/elements/dialog/guidelines/#video-player-dialog
• https://ux.redhat.com/elements/audio-player/ https://github.com/RedHat-UX/red-hat-design-system/blob/baa38206364b3c524b80e588720102fbec3c1a0a/elements/rh-dialog/yt-api.ts

[markcaron]

@nikkimk to do some discovery work around whether there is a need for separate components/elements for 3rd party videos vs. the native <video> element, and how we'd tackle the APIs.

[coreyvickery]

@nikkimk @hellogreg Proposing to move this to the Chansey release.

[hellogreg]

@coreyvickery Done. Thanks! If we decide it needs to go to Charmander, we can do that, too.

[nikkimk]

Questions for discussion at Monday's office hours:

• Should the component open the cookies dialog out of the box, or is this a pattern that consumers have to implement?
• Given there's a lot of microcopy, do we handle it like audio player with translations, have the consumers slot in their own text, or some other method?

[bennypowers]

• composition is better, we can maybe make a wrapper component at a later date. we can't know how the translation systems on different pages will work
• probably prudent for the CMS devs to proactively fill in the defaults on all slots / content attributes, in their CMS patterns
• transcript API should be as similar to rh-audio-player as possible, preferably using the very same rh-cue elements

[nikkimk]

• Should the component open the cookies dialog out of the box, or is this a pattern that consumers have to implement? Nikki will reach out to ask more about the cookies modal.
• Given there's a lot of microcopy, do we handle it like audio player with translations, have the consumers slot in their own text, or some other method? Microcopy will be slotted. English will be default text in the slot, but patterns in Drupal should explicitly slot in microcopy for translations.

[nikkimk]

For the opt-in part:

• slots for consent-message and consent-button-text
• properties require-consent and has-consent
• consent-click event to open cookie dialog