Video Modal

Renders a video thumbnail that transitions into a full modal player with custom controls. It includes play, pause, volume, and fullscreen buttons. Use when needing an accessible video player with interactive controls.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/video-modal

npx layro-cli add @educlopez/video-modal

npx layro-cli add @educlopez/video-modal

bunx layro-cli add @educlopez/video-modal

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import {
  Maximize,
  Minimize,
  Pause,
  Play,
  Volume2,
  VolumeX,
  X,
} from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";