Video Modal

Buttons 82

About

Example component for demonstrating Video Modal component

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

Code

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

Usage.tsx

import { PlayCircle } from "lucide-react";
import {
   VideoModal,
   VideoModalContent,
   VideoModalDescription,
   VideoModalTitle,
   VideoModalTrigger,
   VideoModalVideo,
   VideoPlayButton,
   VideoPlayer,
   VideoPreview,
} from "@/components/ui/video-modal";
import { Button } from "@/components/ui/button";

function VideoModalDemo() {
   return (
      <div className="relative justify-center">
         <VideoModal>
            <VideoModalTrigger>
               <Button>Open modal</Button>
            </VideoModalTrigger>
            <VideoModalContent>
               <VideoModalTitle>Modal Video Demo</VideoModalTitle>
               <VideoModalDescription>
                  Your subtitle or description here
               </VideoModalDescription>
               <VideoModalVideo>
                  <VideoPlayer>
                     <VideoPreview>
                        <img
                           src="https://cdn.21st.dev/assets/mirror/ad/ad776a81127e6fff9c6441afd16acc8663c919b2e91ba3ff945d79132258f875.png"
                           alt="Video preview"
                        />
                     </VideoPreview>
                     <VideoPlayButton>
                        <button className="absolute inset-0 m-auto flex size-32 items-center justify-center rounded-full border border-white border-white/10 bg-white/50 transition duration-300 hover:bg-white/75">
                           <PlayCircle className="size-20 stroke-1 text-white" />
                        </button>
                     </VideoPlayButton>
                     <iframe
                        className="size-full"
                        src="https://cdn.21st.dev/assets/mirror/90/90f710ad0f9a8e1e977a2c4f65fb70af99c65ec543df2f27ac62b3f19f75298c.mp4"
                        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
                        allowFullScreen
                     />
                  </VideoPlayer>
               </VideoModalVideo>
            </VideoModalContent>
         </VideoModal>
      </div>
   )
}

export { VideoModalDemo };