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

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.

Was this page helpful?

Testimonial SmallWaitlist