Video Player

Component 5

About

Composable video player with click or Space to play, scrub-safe seek with buffered tint, time readouts, volume, full screen, and controls that fade out while it plays.

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,
  VideoPlayerControls,
  VideoPlayerFullscreen,
  VideoPlayerPlay,
  VideoPlayerSeek,
  VideoPlayerTime,
  VideoPlayerVideo,
  VideoPlayerVolume,
} from "@/components/ui/video-player";

export default function VideoPlayerDemo() {
  return (
    <div className="mx-auto w-full max-w-2xl">
      <VideoPlayer>
        <VideoPlayerVideo src="https://cdn.21st.dev/assets/localized/0cd83d944a6ca7822b4a8306cecc60a36e859b041f6702c6a1ad9ead78924451.mp4" />
        <VideoPlayerControls>
          <VideoPlayerPlay />
          <VideoPlayerTime mode="elapsed" />
          <VideoPlayerSeek />
          <VideoPlayerTime mode="remaining" />
          <VideoPlayerVolume />
          <VideoPlayerFullscreen />
        </VideoPlayerControls>
      </VideoPlayer>
    </div>
  );
}