yt-style-player

YouTube-style React video player. Works in Next.js, Vite, and any React 18+ app.

Install

pnpm add yt-style-player
# or
npm install yt-style-player

Usage

"use client";

import { VideoPlayer } from "yt-style-player";
import "yt-style-player/styles.css";

export function Player() {
  return (
    <VideoPlayer
      src="/video.mp4"
      poster="/poster.jpg"
      title="My video"
    />
  );
}

In the App Router, import this from a Client Component ("use client").

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | src | string | required | Video URL | | poster | string | — | Poster image | | title | string | — | Title overlay | | className | string | — | Extra class on the root | | theater | boolean | false | Theater state (controlled) | | onTheaterChange | (value: boolean) => void | — | Theater toggle | | showTheaterButton | boolean | true | Hide theater control | | captionsText | string | "Captions on" | Overlay when captions are on | | qualities | string[] | Auto / 1080p… | Quality menu labels | | speeds | number[] | 0.25–2 | Playback rates | | autoPlay | boolean | false | Start playing | | loop | boolean | false | Loop video | | muted | boolean | false | Start muted |

Shortcuts

Click the player first. Then: K / Space, J / L or arrows (±10s), M, F, T, C, 0–9.