magic-ui
components
ui

hero-video-dialog

A hero video dialog component.

animated
button
dialog
flex
form
gradient
hero
hover
motion
positioning
select
text
transform
transition
View Docs

Source Code

Files
hero-video-dialog
1import HeroVideoDialog from "@/components/magicui/hero-video-dialog";
2 
3export function HeroVideoDialogDemo() {
4  return (
5    <div className="relative">
6      <HeroVideoDialog
7        className="dark:hidden block"
8        animationStyle="from-center"
9        videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
10        thumbnailSrc="https://startup-template-sage.vercel.app/hero-light.png"
11        thumbnailAlt="Hero Video"
12      />
13      <HeroVideoDialog
14        className="hidden dark:block"
15        animationStyle="from-center"
16        videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
17        thumbnailSrc="https://startup-template-sage.vercel.app/hero-dark.png"
18        thumbnailAlt="Hero Video"
19      />
20    </div>
21  );
22}