YouTube Video Player

Component 22

About

An expandable YouTube video player that shows a thumbnail with a play button and opens into a full-screen modal iframe with smooth animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds YouTube Video Player to your project and fits it to your theme.

Code

How YouTube Video Player is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { YouTubePlayer } from "@/components/ui/youtube-video-player";

export default function YouTubeVideoPlayerDemo() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <div className="w-full max-w-2xl">
        <YouTubePlayer
          videoId="jNQXAC9IVRw"
          title="Me at the zoo - First YouTube Video"
          customThumbnail="https://cdn.21st.dev/assets/mirror/88/8857ee1952453051e461e82bca53b7910987ea2d51c910a49c423ef18f40e186.jpg"
        />
      </div>
    </div>
  );
}