Create a video player component

[maxatdetroit]

Closes #220

This PR introduces a video player component for the design system. Key features:

• Displays video thumbnail with play icon
  • Thumbnail supports inline (for future use cases) and full-width display modes (for legacy detroit site)
• Supports modal player
  • When clicked, modal opens (50% of viewport width on desktop and 90% on smaller devices) and plays the video within the modal
  • On modal close, the video stops playing
  • Note: Player has a display attribute so we can support inline (i.e. play the video where the thumbnail is) in the future without the modal. It's not implemented currently.
• Supports YouTube videos using the YouTube iFrame Player API
  • Note: video-type attribute is added so we can support other video types (vimeo, self-hosted) in the future and sensibly support backwards compatibility.

Testing

See storybook in chromatic and click around.

2024-06-03.13-26-56.mp4

[maxatdetroit]

Moving to draft while I add some attributes for future implementation and fix layout on smaller viewports.

[jedgar1mx]

It looks like it's missing the back drop effect. It helps with focus but also for closing functionality.

[maxatdetroit]

Fixed @jedgar1mx . Anything else you think we could improve?

[jedgar1mx]

This looks good. Well done.