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