Skip to main content
Video
page.tsx
import Video from "@/components/video";

​
Properties

​
src
string
required
The URL of the video (YouTube, Vimeo, or custom source).
​
thumbnail
string
URL of the custom thumbnail image. If not provided, it will attempt to fetch from the video source.
​
id
string
default:"'demo-video'"
The ID attribute for the component.
​
title
string
default:"Convince yourself how our product works"
The title displayed above the video.
​
description
string
The description displayed below the title.
​
children
React.ReactNode
Additional content to display over the video thumbnail.

​
Usage

example.tsx
<Video src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" id="demo-video">
	<div className="flex rounded-full border border-gray-200 bg-white p-2 shadow-xl group-hover:shadow-2xl">
		<Image
			src="https://avatars.githubusercontent.com/u/70667104?v=4"
			className="blur-0 h-10 w-10 rounded-full"
			width={36}
			height={36}
			alt="Watch Demo"
		/>
		<div className="ml-2 mr-4 flex flex-col text-left">
			<p className="text-sm font-medium text-gray-500">Watch Demo</p>
			<p className="text-sm text-blue-500">1:57</p>
		</div>
	</div>
</Video>
If you need basic components like buttons, inputs, and more, they are available with Shadcn UI.
⌘I