Copy-paste YouTube IFrame player components. Zero branding. Full control. Built for shadcn.
npx shadcn@latest add https://ytcn.dev/r/ytcnThumbnail-first loading, iframe offset, and cover div eliminate all YouTube chrome before a single frame plays.
One CLI command copies components into your project. You own every line. Modify anything without forking.
Built on Button, Slider, and Popover. Uses your existing design tokens. Zero new dependencies.
Thumbnail shown instantly while iframe loads in background. Seamless fade when video is ready. No black screen.
Strict TypeScript throughout. Every prop, state field, and control method has explicit types and JSDoc.
All components are "use client". Safe to import from Server Components. No window access at module level.
Drop in a one-liner or go fully headless with the hook API.
import { YtcnPlayer } from "@/components/ytcn/ytcn-player"
export default function VideoPage() {
return (
<YtcnPlayer videoId="dQw4w9WgXcQ" />
)
}Each component is independently copyable.
ytcn-player
Full composed player
ytcn-controls
Controls bar
ytcn-progress
Timeline scrub bar
ytcn-volume
Volume + mute
ytcn-speed
Speed picker
ytcn-fullscreen
Fullscreen toggle
ytcn-overlay
Click-to-play
ytcn-loader
Loading state
Get started with ytcn in under 2 minutes. Read the docs or jump straight into the code.