Component
Loader
Loading state overlay shown while the YouTube iframe initializes.
Overview
YtcnLoader is a visual overlay displayed during the "loading" phase — after the user clicks the thumbnail and before the iframe is ready to play. It shows a blurred backdrop of the thumbnail with a centered spinner, providing a polished transition between the static thumbnail and the live video.
Usage
custom-loader.tsx
import { YtcnLoader } from "@/components/ytcn/ytcn-loader"
// Inside your custom player layout:
{state.phase === "loading" && (
<YtcnLoader thumbnailUrl={thumbnailUrl} />
)}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| thumbnailUrl | string | null | — | URL of the thumbnail to use as the blurred backdrop. Falls back to a solid dark background if null. |
Customization
Since the loader is copied into your project, you can fully customize the loading experience. Common modifications include:
- •Replacing the spinner with a branded animation or skeleton
- •Adjusting the backdrop blur intensity or overlay opacity
- •Adding a loading progress indicator
- •Showing a "Loading video..." text label