FEAT: Video teaser block (lazy-loaded)

[Arnimag]

User Story

In order to experience immersive brand or campaign videos on editorial pages
As a shopper
I want to see video content that loads efficiently so it does not slow down the rest of the page

Acceptance Criteria

• 1. A CMS page with a video teaser block shows a video player with a visible thumbnail / poster image before playback.
• 2. The video does not play automatically without user interaction — I must click play.
• 3. Clicking play starts the video in the player.
• 4. An optional headline or caption below (or overlaid on) the video is displayed as configured in the CMS.
• 5. The video is in the active language if localised versions are configured.
• 6. The video file is not downloaded until I interact with the player or the block scrolls into view.
• 7. The poster image is shown immediately — the page does not show a blank space while the video loads.
• 8. The video block occupies its space before the video loads — no layout shift as it appears.
• 9. The play button has a clear accessible label.
• 10. If the video has audio, captions or a transcript are provided (or noted as a CMS requirement).
• 11. Caption and headline text from CMS per locale.
• 12. Content is managed in the CMS — changes to copy or images take effect without a code deployment.

Background & Resources

Details: Video hosted on a CDN or embedded from an external provider (e.g. Vimeo/YouTube). Use a facade pattern (poster-only until click) to avoid loading the heavy iframe until user interaction. aspect-ratio CSS prevents CLS. Captions handled by the video host's player.

Key files:

• apps/presentation/features/content/teasers/teaser-video-block.tsx — lazy-loads the video using Intersection Observer or loading="lazy" on the iframe
• CMS content type: videoTeaser with fields videoUrl, posterImage, headline, caption
  Links/Screenshots: (Drag and drop images or paste links here)