Installation
npx shadcn@latest add "https://magicui.design/r/hero-video-dialog"Examples
Top-in-bottom-out
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| animationStyle | string | Animation style for the dialog | "from-center" |
| videoSrc | string | URL of the video to be played | - |
| thumbnailSrc | string | URL of the thumbnail image | - |
| thumbnailAlt | string | Alt text for the thumbnail image | "Video thumbnail" |
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
embedversion of the video URL.