Video

A responsive video component that supports YouTube videos and shorts.

Installation

npx shadcn@latest add @fulldev/video

Usage

Currently supports YouTube watch URLs, youtu.be share links and YouTube Shorts.

import { Video } from "@/components/ui/video"
<Video src="https://www.youtube.com/watch?v=M7lc1UVf-VE" />

Example

Share links from the YouTube share button work as well.

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 for more information on props.