Components
Loading preview...
Clean and immersive. Full-width thumbnail with centered play button and bottom-left overlay text. Communicates professionalism and storytelling. Perfect for product intros, company overviews, or explainer videos.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/video-thumbnail-playerimport { VideoPlayer } from "@/components/ui/video-thumbnail-player";
export default function VideoPlayerDemo() {
return (
<div className="w-full max-w-2xl mx-auto p-4">
<VideoPlayer
thumbnailUrl="https://images.unsplash.com/photo-1593642532454-e138e28a63f4?q=80&w=2069&auto=format&fit=crop"
videoUrl="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" // Example: YouTube embed URL with autoplay
title="Building the Future"
description="A look into modern architecture and design."
className="rounded-xl"
/>
</div>
);
}