Component
Player
The top-level composed YouTube player component.
Installation
bash
npx shadcn@latest add https://ytcn.dev/r/ytcnUsage
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. |
videoId*
string
11-character YouTube video ID extracted from any YouTube URL. Example: "dQw4w9WgXcQ"
startAt0
number
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.
keyboardShortcutstrue
boolean
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.