Hero Video Dialog

Installation

Examples

Top-in-bottom-out

Usage

import { HeroVideoDialog } from "@/components/magicui/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.