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 };
Part of Nyxb UI — browse the full library on 21st.dev.