Hero Video Dialog

Dashboards 769

About

A hero video dialog component.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Video Dialog to your project and fits it to your theme.

Code

How Hero Video Dialog is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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,
}