Stepwise UI

Video Player

A fully custom HTML5 video player with a live edge ambilight - colours along the frame’s perimeter bloom out behind the squircle, shifting with the picture. HugeIcons controls, a thin line volume control, and a bar that fades in on hover and auto-hides after 2.5s.

Installation

npx stepwise-ui add video-player

Default

Pick a clip and hit play. Hover the speaker for volume; hover or drag the bar to see the time.

Aspect ratio

Set the frame with aspectRatio - CSS form (16/9) or colon form (16:9). Custom accepts any valid CSS ratio.

No source

Renders a placeholder when no src is provided - useful for skeleton states during data loading.

No video source

<VideoPlayer className="w-full max-w-sm" />

Props

PropTypeDescription
src
string
Video URL. Shows a placeholder when omitted.
poster
string
Thumbnail shown before the video plays.
autoPlay
boolean
Start playback on load. Default false.
loop
boolean
Loop playback. Default false.
radius
number
Corner radius (squircle-smoothed). Default 24.
ambient
boolean
Edge-sampled ambilight behind the player. Default true.
aspectRatio
string
Frame ratio (`16/9` or `16:9`). Default 16/9. Any CSS ratio works for custom.
className
string
Applied to the outer container. Use it to set width.