Components
Loading preview...
The ThumbnailButton component displays a video thumbnail that, when clicked, opens a modal video player. It supports both YouTube embeds (via youtubeId) and direct video URLs (via videoUrl), and it gracefully handles missing thumbnail or video sources by falling back to sensible defaults.
@arunachalam0606
npx shadcn@latest add https://21st.dev/r/arunachalam0606/thumbnail-button-video-playerimport React, { useState } from 'react';
import ThumbnailButton from "@/components/ui/thumbnail-button-video-player";
const Demo: React.FC = () => {
return (
<div className="min-h-screen w-screen flex items-center justify-center bg-gray-50 dark:bg-zinc-950 transition-colors duration-500">
<div className="flex flex-col gap-6 p-8">
<h1 className="text-2xl font-bold text-center text-foreground mb-4">
Thumbnail Button opens video player
</h1>
<div className="flex flex-col items-center gap-4 max-w-md">
{/* YouTube Video */}
<ThumbnailButton
youtubeId="dQw4w9WgXcQ" // Use the id from the youtube URL
title="Never Gonna Give You Up"
/>
{/* Regular Video File */}
<ThumbnailButton
videoUrl="https://me7aitdbxq.ufs.sh/f/2wsMIGDMQRdYyFbubgfAdJGgcHaXTtYDS9BWOoP8AKMkrxu6"
thumbnailUrl="https://me7aitdbxq.ufs.sh/f/2wsMIGDMQRdYrcDsPep5NDIwsMcqZHiUGKxvuhb64FA8T3JP"
title="Goku Goes Super Saiyan (MP4)"
/>
</div>
</div>
</div>
);
};
export default Demo;