Video Player

A styled video component with custom play/pause, mute, seek, and fullscreen controls, poster image, and keyboard shortcuts.

Basic

A styled video component with custom play/pause, mute, seek, and fullscreen controls, poster image, and keyboard shortcuts. Click the play button to interact.

0:00 / 0:00

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add video-player

pnpm dlx @work-rjkashyap/unified-ui add video-player

npx @work-rjkashyap/unified-ui add video-player

bunx @work-rjkashyap/unified-ui add video-player

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	VideoPlayer,
	Button,
} from "@work-rjkashyap/unified-ui";

4/3

0:00 / 0:00

{/* 16:9 (default) */}
<VideoPlayer src="/video.mp4" poster="/poster.jpg" aspectRatio="video" />

{/* 4:3 */}

<VideoPlayer src="/video.mp4" poster="/poster.jpg" aspectRatio="4/3" />

{/* Square */}

<VideoPlayer src="/video.mp4" poster="/poster.jpg" aspectRatio="square" />

{/* Natural (no constraint) */}

<VideoPlayer src="/video.mp4" aspectRatio="auto" />

{/* 16:9 (default) */}<VideoPlayer src="/video.mp4" poster="/poster.jpg" aspectRatio="video" />{/* 4:3 */}<VideoPlayer src="/video.mp4" poster="/poster.jpg" aspectRatio="4/3" />{/* Square */}<VideoPlayer src="/video.mp4" poster="/poster.jpg" aspectRatio="square" />{/* Natural (no constraint) */}<VideoPlayer src="/video.mp4" aspectRatio="auto" />

<VideoPlayer
src="/video.mp4"
poster="/poster.jpg"
onEnded={() => {
  console.log("Video ended");
  showNextVideo();
}}
/>

<VideoPlayersrc="/video.mp4"poster="/poster.jpg"onEnded={() => {  console.log("Video ended");  showNextVideo();}}/>

Props

Prop	Type	Default	Description
`src`	`string`	—	Video source URL.
`poster`	`string`	—	Poster image URL.
`aspectRatio`	`"video" \| "square" \| "4/3" \| "auto"`	`"video"`	Aspect ratio constraint.
`autoPlay`	`boolean`	`false`	Auto-play the video.
`loop`	`boolean`	`false`	Loop the video.
`muted`	`boolean`	`false`	Start muted.
`controls`	`boolean`	`true`	Show custom controls overlay.
`className`	`string`	—	Additional CSS classes.
`onEnded`	`() => void`	—	Callback when video finishes.

Keyboard Shortcuts

Key	Action
`Space` / `K`	Toggle play/pause
`M`	Toggle mute
`F`	Toggle fullscreen
`→`	Seek forward 5 seconds
`←`	Seek backward 5 seconds

Accessibility

Uses role="region" with aria-label="Video player".
All control buttons have descriptive aria-label attributes.
Fully keyboard navigable — all shortcuts work when the player is focused.
Big play button overlay when paused for clear affordance.
Time display and progress bar provide temporal orientation.
Focus ring visible on keyboard navigation via focus-visible.

Browsers require muted to be set for autoPlay to work without user interaction. Always pair autoPlay with muted for reliable behavior.

Design Tokens

Token	Usage
`--border`	Player container border
`--radius-lg`	Player border radius
`--background`	Controls gradient base
`--foreground`	Control icon colors
`--primary`	Focus ring color
`--duration-fast`	Control transition speed

Basic

Installation

Or install the full package

Anatomy

Examples

Default (16:9)

Aspect Ratios

Autoplay, Loop & Muted

Without Controls

Without Poster

Muted by Default

onEnded Callback

Props

Keyboard Shortcuts

Accessibility

Design Tokens

On this page