Components
Loading preview...
Example component for demonstrating Video Modal component
npx shadcn@latest add https://21st.dev/r/nyxbui/video-modalimport { 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.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
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.magicui.design/globe.mp4"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowFullScreen
/>
</VideoPlayer>
</VideoModalVideo>
</VideoModalContent>
</VideoModal>
</div>
)
}
export { VideoModalDemo };