feature: Video Block

[jbmoelker]

Changes

Adds Video Block that renders a video uploaded in DatoCMS with a cover image, caption, support for subtitles and options to autoplay, mute and loop. Features (also in block readme):

• Privacy first alternative to Video Embed Block, as video uploaded in DatoCMS is served without tracking (no consent required).
• Supports video streaming with adaptive bitrate (using HLS) for best UX and performance.
• Fallback to mp4 video when streaming is not available.
• Fallback to video download link when HTML video element is not supported.
• Supports subtitle tracks for enhanced accessibility, automatically selecting default locale when available.
• Supports figcaption defaulting to external video's title and optional custom title override.
• Supports autoplay, mute and loop.
• Autoplay is only triggered if no reduced motion is preferred (for a11y) and save data mode is off.
• Conditionally loads video and streaming package (hls.js) on click or when in view in case autoplay is enabled.

Moved custom image and custom play button overlay to separate ticket.

Associated issue

Resolves #33

How to test

1. Open /en/overview-page/demos/video-block/
2. Test with different uploaded videos in CMS, with and without subtitles
3. Verify streaming, mp4 and fallback work (by disabling one at a time locally)
4. Verify autoplay and other block options work as expected

Checklist

• [x] I have performed a self-review of my own code
• [x] I have made sure that my PR is easy to review (not too big, includes comments)
• [x] I have made updated relevant documentation files (in project README, docs/, etc)
• I have added a decision log entry if the change affects the architecture or changes a significant technology
• [x] I have notified a reviewer

[cloudflare-workers-and-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	ea2b342
Status:	✅  Deploy successful!
Preview URL:	https://7260b848.head-start.pages.dev
Branch Preview URL:	https://feat-video-block.head-start.pages.dev

View logs