Docs draft
VideoPlayer
Component storyFigma (VideoPlayer) ↗React component ↗DSDS entity ↗
When to use it
useThe player shell: media, top controls, center touch cluster, skip-intro chip, overlay slot for gates and status.
Anatomy
media — video or poster still, 16:9.
controls slot — PlayerControls (top, on gradient) or AdControls; hidden entirely when inactive.
skip intro — .SkipIntro chip bottom-right on bg.elevated; sentence-case label (the uppercase treatment stays dead).
overlay slot — PlayerGate / PlayerOverlay above a bg.scrim wash.
Design specifications
| surface | color.ink.900 behind media |
| skip-chip | color.bg.elevated + type.label, space.8/12 padding |
Accessibility
The shell is a passive region; every interactive child is a labeled button. Booleans in Figma (Show Controls / Skip Intro / Center Controls) mirror runtime state.