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

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```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**, **youtu.be share links** and
**YouTube Shorts**.

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

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

## Example

Share links from the YouTube share button work as well.

```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.
- 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.