Video player

Custom-controlled <video>wrapper. Aligned with J&J DS v1.2 (Figma 22479:51586). Supports caption overlay, optional chapter strip with thumbnails, fullscreen, and the standard play/seek/mute controls.

Default — captions overlay

A standard 16:9 player with a captions overlay. Click the player surface to play/pause.

In hac fastibulus platea dictumst. Sed aliquid viverra erat, sit amet feugiat metus gravida quis.

00:00 / 00:00

Show source

<VideoPlayer
  src="…BigBuckBunny.mp4"
  poster="…BigBuckBunny.jpg"
  caption="In hac fastibulus platea dictumst…"
/>

With chapters strip

Pass `chapters` to render a side strip with thumbnails. Click a chapter to seek to it; the active chapter title appears in the controls bar.

Sit amet feugiat metus gravida quis. Lorem ipsum at rhoncus.

00:00 / 00:00Chapter 1: Lorem ipsum at rhoncus

Show source

<VideoPlayer src="…" poster="…" caption="…" chapters={[
  { id: "intro", title: "Chapter 1: …", start: 0, thumbnail: "…" },
  { id: "ch2", title: "Chapter 2: …", start: 10, thumbnail: "…" },
  …
]} />

Hero / autoplay (no controls)

Disable the controls overlay for a silent autoplay hero video.

Show source

<VideoPlayer src="…" autoPlay loop muted hideControls />

Custom aspect ratio

Override the default 16:9 (e.g. 4:3 or 1:1) via the `aspectRatio` prop.

00:00 / 00:00

Show source

<VideoPlayer src="…" aspectRatio={1} />