Playdeck

A video player you compose, not one you configure.

React primitives and hooks over native video, HLS, YouTube, Vimeo and Wistia. You write the markup, you write the CSS, and the same six lines drive all five.

pnpm add @playdeck/react
Start →
01

Compose it

Every control is a component. Reorder them, drop one, put your own between them.

<Player.Controls>
  <Player.PlayButton />
  <Logo />
  <Player.Time type="current" />
</Player.Controls>
02

Style it

No CSS ships in the bundle. Two authored themes, or write your own against stable part names.

[data-playdeck-part='play-button'] {
  border-radius: 999px;
}
03

Ask what the provider can do

Every provider declares what it can do. A control it cannot honour renders nothing, and you can read the same answer.

usePlayerState((s) => s.capabilities.pictureInPicture)
04

Recover from refused autoplay

Ask for sound. If the browser refuses, the player retries muted once and tells you, so you can draw the unmute.

<Player.Root autoplay="audible-then-muted">

23 kB gzipped, the whole of what @playdeck/react ships. Adding YouTube costs 7 kB. 0 requests to a provider before play.

Start →