Docs·Video Player 002

Video Player 002

Full inline player with centered play, sliding controls, scrubber, volume, and ambient glow.

Installation

$pnpm dlx shadcn@latest add @spiderui/video-player-002

Installs video-player-002.tsx and video-player-shared.tsx. Requires motion, @hugeicons/react, and @hugeicons/core-free-icons.

Usage

A complete inline player for hero sections and case-study embeds. While paused, a centered play button sits over the poster or last frame. On play, a control bar slides up from the bottom with play/pause, a scrubbable progress track, and a volume slider on the right.

Shares the same thumbnailSrc blur-fade behavior and ambientIntensity glow as Video Player 001— poster colors while paused, video frames while playing. Place the player on a dark surface when using ambient lighting so the bleed reads clearly.

Demo video from MDN sample media.

API Reference

PropTypeDefault
srcVideo file URL. Supports mp4, mov, and other browser-native formats.
stringDEFAULT_VIDEO_PLAYER_SRC
thumbnailSrcOptional poster image shown while paused. Blur-fades in on pause and out on play.
string—
defaultVolumeInitial volume from 0 (muted) to 1 (full).
number1
ambientIntensityAmbient glow from 0 (off) to 1 (max). Samples the poster while paused, then live video frames during playback.
number0
classNameClasses on the outer frame wrapper.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
import { VideoPlayer002 } from "@/components/ui/video-player-002"
import { VideoPlayer002 } from "@/components/ui/video-player-002"

export default function Page() {
  return (
    <VideoPlayer002
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
      thumbnailSrc="/posters/hero.jpg"
      defaultVolume={0.8}
      ambientIntensity={0.85}
      className="w-full max-w-4xl"
    />
  )
}