Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Video
description: A responsive video component that supports YouTube videos and shorts.
sidebar:
  badge:
    text: ⋅
    variant: success
---

```astro live props={{ name: 'video' }}
---
import { Video } from "@/components/ui/video"
---

<Video src="https://www.youtube.com/watch?v=M7lc1UVf-VE" />
```

## Installation

```bash
npx shadcn@latest add @fulldev/video
```

## Usage

Currently supports **YouTube watch URLs** and **YouTube Shorts**.

```ts
import { Video } from "@/components/ui/video"
```

```astro
<Video src="https://www.youtube.com/watch?v=M7lc1UVf-VE" />
```

## Example

```astro live
---
import { Video } from "@/components/ui/video"
---

<Video src="https://youtu.be/M7lc1UVf-VE" />
```

## Notes

- Pass the original YouTube URL and let the component derive the embed URL.
- The preview uses YouTube's thumbnail first, then loads the embed when someone
  presses play.
- Shorts render with a portrait aspect ratio, while regular YouTube videos use a
  landscape ratio.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/video) for more information on props.