Video players embed self-hosted clips behind DrumKit’s own hover-revealed control chrome, replacing the browser’s default controls with on-brand play, volume, seeking, speed, and fullscreen.
Video players embed self-hosted clips behind DrumKit’s own hover-revealed control chrome, replacing the browser’s default controls with on-brand play, volume, seeking, speed, and fullscreen.
Change the props and copy the result. The cover picker maps to the real thumbnail props, and every other control is a real prop. Switching size also resizes the preview frame to the footprint the sheet drew that chrome for (320, 560, 720): the size prop itself only scales the bar and picks its controls, so the frame is the demo’s container rather than part of the snippet.
The sample streams, and it is not muted
One directory: the player itself, a standalone blurred play badge for building your own covers, and the filled glyphs behind both. The player’s own cover badge is built inline rather than from that export, and is 16px smaller.
| Component | Description | Import from |
|---|---|---|
| VideoPlayer | The player: a native video element behind a hover-revealed control bar, sized sm, md, or lg. | @/components/base/video-player/video-player |
| PlayButtonIcon | A standalone 80px blurred play badge for custom covers and linked posters. The player does not use it: its own cover badge is built inline at 64px, so the two are similar but separate. | @/components/foundations/play-button-icon |
| PlayIcon / PauseIcon / AirplayIcon | The filled SVG glyphs behind the control bar and the badge; they take plain SVG props. AirplayIcon is DrumKit-authored (the design draws a filled triangle, and the line-only icon set does not carry one). | @/components/base/video-player/icons |
The 3 sizes decide which controls render, not how big the video is: sm keeps play, mute, and fullscreen; md adds the timestamps, the seekable progress bar, and the trick-play readout; lg adds the volume slider, the playback speed control, and the Stream button, which appears only when a remote receiver is on the network. Each frame below sits at the width its Figma counterpart was drawn at (320, 560, 720); the geometry itself always comes from className.
size is chrome, className is geometry
size prop scales the bar and picks its controls; the frame’s width, aspect, and corner radius are yours to set with className. The video and the cover inherit the radius through rounded-[inherit].An optional thumbnail hides the video until first play: the image, the blurred play badge, and an optional scrim. Play dismisses it, and the end of the clip brings it back. The badge circle is suppressed at sm, where the bare glyph renders alone.
This cover is the clip’s own title card
thumbnailAltdescribing what plays rather than what the picture shows.The cover and the media arrive from the server, so the whole player is one block at its footprint; the controls are drawn over the media once it is there.
The player’s states are live rather than forced: the kit exposes no state props and writes its treatments inline against real hover and focus, so there is no honest way to pin them statically. The first frame has no cover, so its center play badge stands while paused; hover to reveal the bar, Tab to it for the focus ring plus the bar, and press play to watch the badge step aside. Let the second clip end to watch its cover return.
No disabled, no loading, no error state