import { HeroVideoDialog } from "@/components/ui/hero-video-dialog"
function HeroVideoDialogDemo() {
return (
<div className="relative">
<HeroVideoDialog
className="dark:hidden block"
animationStyle="from-center"
videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
thumbnailSrc="https://cdn.21st.dev/assets/mirror/fc/fc3ccc2cd42f9a07d120f454efdd2c2ecf95bc252f30ee0abc007ae8c22665f9.png"
thumbnailAlt="Hero Video"
/>
<HeroVideoDialog
className="hidden dark:block"
animationStyle="from-center"
videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
thumbnailSrc="https://cdn.21st.dev/assets/mirror/b4/b4fb85afae2672890bcb8d353724ed6d17d752ded4baf1552379451f0d352a01.png"
thumbnailAlt="Hero Video"
/>
</div>
)
}
function HeroVideoDialogDemoTopInBottomOut() {
return (
<div className="relative">
<HeroVideoDialog
className="dark:hidden block"
animationStyle="top-in-bottom-out"
videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
thumbnailSrc="https://cdn.21st.dev/assets/mirror/fc/fc3ccc2cd42f9a07d120f454efdd2c2ecf95bc252f30ee0abc007ae8c22665f9.png"
thumbnailAlt="Hero Video"
/>
<HeroVideoDialog
className="hidden dark:block"
animationStyle="top-in-bottom-out"
videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
thumbnailSrc="https://cdn.21st.dev/assets/mirror/b4/b4fb85afae2672890bcb8d353724ed6d17d752ded4baf1552379451f0d352a01.png"
thumbnailAlt="Hero Video"
/>
</div>
)
}
export {
HeroVideoDialogDemo,
HeroVideoDialogDemoTopInBottomOut,
}
Part of Magic UI — browse the full library on 21st.dev.