║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Hero Video Dialog date: 2024-08-26 description: A hero video dialog component. author: dillionverma published: true

<ComponentPreview name="hero-video-dialog-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/hero-video-dialog

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hero-video-dialog" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Examples

Top-in-bottom-out

<ComponentPreview name="hero-video-dialog-demo-top-in-bottom-out" />

Usage

import { HeroVideoDialog } from "@/components/ui/hero-video-dialog"

<HeroVideoDialog
  className="block dark:hidden"
  animationStyle="from-center"
  videoSrc="https://www.example.com/dummy-video"
  thumbnailSrc="https://www.example.com/dummy-thumbnail.png"
  thumbnailAlt="Dummy Video Thumbnail"
/>

Props

| Prop | Type | Default | Description | | ---------------- | -------- | ------------------- | -------------------------------- | | animationStyle | string | "from-center" | Animation style for the dialog | | videoSrc | string | - | URL of the video to be played | | thumbnailSrc | string | - | URL of the thumbnail image | | thumbnailAlt | string | "Video thumbnail" | Alt text for the thumbnail image |

Animation Styles

The animationStyle prop accepts the following values:

• "from-bottom": Dialog enters from the bottom and exits to the bottom
• "from-center": Dialog scales up from the center and scales down to the center
• "from-top": Dialog enters from the top and exits to the top
• "from-left": Dialog enters from the left and exits to the left
• "from-right": Dialog enters from the right and exits to the right
• "fade": Dialog fades in and out
• "top-in-bottom-out": Dialog enters from the top and exits to the bottom
• "left-in-right-out": Dialog enters from the left and exits to the right

Note

• If using a YouTube video, make sure to use the embed version of the video URL.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║