Component

Player

The top-level composed YouTube player component.

Installation

bash

npx shadcn@latest add https://ytcn.dev/r/ytcn

Usage

components/my-player.tsx

"use client"

import { YtcnPlayer } from "@/components/ytcn/ytcn-player"

export function MyPlayer() {
  return (
    <YtcnPlayer
      videoId="dQw4w9WgXcQ"
      startAt={0}
      onEnd={() => console.log("Video ended")}
      onTimeUpdate={(current, duration) => {
        console.log(`${Math.floor(current)}s / ${Math.floor(duration)}s`)
      }}
    />
  )
}

Props

Prop	Type	Default	Description
videoId*	string	—	11-character YouTube video ID extracted from any YouTube URL. Example: "dQw4w9WgXcQ"
startAt	number	0	Resume playback from this position in seconds. Useful for LMS progress tracking.
onEnd	() => void	—	Fired when video reaches the end. Use for auto-advance in playlists or course completion.
onTimeUpdate	(current: number, duration: number) => void	—	Polled every 250ms during playback. Throttle writes to avoid excessive database calls.
keyboardShortcuts	boolean	true	Enables built-in keyboard shortcuts. Disable if your app has conflicting key bindings.
className	string	—	Applied to the outermost container div.

Keyboard Shortcuts

Key	Action
`Space`	Play / Pause
`F`	Toggle fullscreen
`M`	Toggle mute
`←`	Seek back 10 seconds
`→`	Seek forward 10 seconds

Input safety

Shortcuts are automatically disabled when focus is on an input, textarea, or contenteditable element.

Source

View source on GitHub →

Quick Start

Controls