Video Player

Component 237

About

A modern, customizable video player component with full controls and keyboard shortcuts.

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

Code

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

Usage.tsx

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

export default function DemoOne() {
  return (
    <>
      <VideoPlayer
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        poster="https://cdn.21st.dev/assets/mirror/e6/e6378fc0368cb38d4ec6554117ce9fda1ad5d71f4cb7ed5a7e242f329aa8bfce.png"
        size="default"
      />
    </>
  );
}