# Video player

> Video with custom auto-hiding controls, scrubbing, captions, fullscreen and shortcuts.

Component · Pro · https://lodeui.com/components/video-player

## When to use

- Product demos, courses and marketing videos you host yourself.

## When not to use

- YouTube or Vimeo embeds: use their players.

## Installation

```bash
npx shadcn@latest add @lode/video-player
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { VideoPlayer } from "@/components/ui/video-player";

<VideoPlayer title="Product tour" src="/videos/tour.mp4" poster="/videos/tour.jpg" captions="/videos/tour.vtt" />
```

## API reference

### VideoPlayer

A <video> with custom controls that hide while playing.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| src / poster | `string` | – | Video and poster URLs. |
| title | `string` | – | Names the player. |
| captions | `string` | – | WebVTT file; shown by default. |
| aspectRatio | `string` | `"16 / 9"` | Frame ratio. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Space or K | Play or pause |
| ← / → | Back or forward 5 seconds |
| M | Mute |
| F | Fullscreen |

## Accessibility

- A focusable region named after the video; every control is labelled; the seek bar reports time as text.
- Controls stay visible while focus is inside.

## Motion

- Controls fade after 2.2 seconds of stillness; a play / pause badge pulses in the center.

## Responsive behavior

- Fills its width at the given ratio; playsInline on phones.

## Performance

- preload="metadata" so nothing heavy loads until play.

## Notes for AI

- Always provide captions for speech.

## Related

- [Audio player](https://lodeui.com/components/audio-player) — Compact audio player with a clickable waveform, skip and playback speed.
- [Lightbox](https://lodeui.com/components/lightbox) — Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions.
- [Image compare](https://lodeui.com/components/image-compare) — Before and after slider with drag, hover and keyboard control.