> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Video

`video` renders a video source with optional poster and playback controls.

## Properties

| Property    | Accepted value     | Description                                         |
| ----------- | ------------------ | --------------------------------------------------- |
| `src`       | `string`           | Video URL or supported video source. Required.      |
| `thumbnail` | `string`           | Poster image shown before or while the video loads. |
| `alt`       | `string`           | Accessibility description.                          |
| `play`      | `boolean`          | Whether playback should be active.                  |
| `volume`    | `number`           | Volume from `0` to `1`; `0` is muted.               |
| `style`     | `StyleProperties`  | Size, shape, spacing, and appearance values.        |
| `key`       | `string \| number` | React key for dynamic videos.                       |
| `class`     | `string`           | Registered style name for this node only.           |

## Example

```tsx theme={null}
<video
  src="https://cdn.example.com/products/demo.mp4"
  thumbnail="https://cdn.example.com/products/demo-poster.jpg"
  alt="Product demonstration"
  play={isVisible}
  volume={0}
  style={{ width: "100%", height: 240, borderRadius: 16 }}
/>
```

Control `play` from React state or visibility logic instead of starting every video at once.
`video` is a leaf node and does not render `children`.