Video

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

<Video src="https://youtube.com/watch?v=dQw4w9WgXcQ" />

Installation

To install the video component, run the following command:

pnpm dlx shadcn@latest add @fulldev-ui/video

Usage

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

<Video src="https://youtube.com/watch?v=dQw4w9WgXcQ" />

Examples

YouTube Video

Embed a YouTube video by providing the watch URL.

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

<Video src="https://youtube.com/watch?v=dQw4w9WgXcQ" />

YouTube Shorts

Embed a YouTube Short by providing the shorts URL.

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

<div class="max-w-sm">
  <Video src="https://youtube.com/shorts/dQw4w9WgXcQ" />
</div>

API Reference

Video

The Video component automatically embeds YouTube videos and shorts with the correct aspect ratio.

Prop	Type	Description
src	string	The YouTube video or shorts URL