Thumbnail button video player

Buttons 228

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Thumbnail button video player to your project and fits it to your theme.

Code

How Thumbnail button video player is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import 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;