VideoPlaceholder

Reusable inline player skeleton used on five demo surfaces (landing hero, dashboard hero, letter-result success, adviser case detail, tenant-admin reports). Real demo videos are swapped in by the user later — for the demo we ship a high-fidelity placeholder so the product story reads complete.

Spec

Aspect: 16:9 (CSS aspect-ratio: 16 / 9)
Background: Tinted depth surface --surface-depth-1 (no drop shadow)
Overlay: Linear gradient bottom 40%, 0 → rgba(0,0,0,.55) for caption legibility
Halo: Radial brand-tint behind the play glyph (color-mix, 8% brand)
Glyph: 64px circle, --color-surface bg, lucide play-circle stroke in --color-accent
Caption: Bottom-left, --text-sm weight-semi, white. Format: "Watch 90s walkthrough"
Duration: Top-right pill, optional. rgba(0,0,0,.6) bg, white text, --radius-pill
Border: 1px --color-line, --radius-hero (12px)
Hover: Glyph scales to 1.05 over --dur-base (200ms)
Focus: Standard --focus-ring (4px outer ring, brand bg gap)
Click: No-op for now — logs console.info('[VideoPlaceholder] coming soon'). Phase D PRD §9 question: stub modal vs no-op.
Aria: aria-label="Demo video placeholder — coming soon"
Reduced motion: Hover scale removed; halo pulse not applied at this scope

React API (Phase C)

<VideoPlaceholder
  caption="How Resolve works"
  duration="90s"
  posterSrc={null}     {/* future-proof: when set, renders as <img> */}
  onPlay={() => ...}   {/* future-proof: when wired, opens real player */}
  className="dashboard-hero-video"
/>

Examples

Default (with caption + duration)

90s Watch 90s walkthrough

Minimal (caption only, no duration)

How a counsellor reviews your draft

Wide (full-bleed reports surface)

60s Reading your dashboard in 60s

Compact (case-detail context panel)

60s How to handle this case