Video Player
A custom video player with thumbnail overlay, play/pause, seek bar, volume, and fullscreen controls.
Small
Compact player with 400px max width.
Small
Medium
Default size with 640px max width.
Medium
Large
Full-width player with 960px max width.
Large
Without Thumbnail
Player without a poster image — shows the first frame.
No Thumbnail
Usage
Import and configure the VideoPlayer.
tsx
import { VideoPlayer } from "@/components/ui/VideoPlayer";
<VideoPlayer
size="md"
src="https://example.com/video.mp4"
thumbnailUrl="https://example.com/thumb.jpg"
/>
// Auto-play muted
<VideoPlayer size="lg" src="..." autoPlay muted loop />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Video source URL (required). |
| thumbnailUrl | string | — | Poster/thumbnail image URL. |
| size | "sm" | "md" | "lg" | "md" | Max width constraint. |
| autoPlay | boolean | false | Auto-play on mount. |
| muted | boolean | false | Start muted. |
| loop | boolean | false | Loop playback. |