# Video frame (goodtabs UI)

A framed native video with controls and a poster image.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/video-frame.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/video-frame`

## Usage

```tsx
import { VideoFrame } from "@/components/ui/video-frame"

<VideoFrame poster="/poster.jpg" title="Product walkthrough">
  <source src="/walkthrough.mp4" type="video/mp4" />
</VideoFrame>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| poster | `string` |  | Poster image shown before playback. |
| title | `string` |  | Accessible name for the video. |
| ratio | `"16/9" | "4/3" | "1/1"` |  | Aspect ratio of the frame. Defaults to 16/9. |
| maxWidth | `string` |  | Constrain the frame, for example "560px". |

## When to use

- A product walkthrough or short demo on a landing page
- Any native video that needs a calm, bordered frame

## When not to use

- Embeds from a video host, which want an iframe
- Autoplaying background video

## Notes for agents

- Server component; the native video element supplies the controls
- Pass sources and captions as children (source, track)
- preload is none, so the poster is the only request until play
- Other video props pass through to the element

Docs: https://ui.goodtabs.co/components/video-frame