Liquid UIdocs
Components

Liquid Video Player

An accessible native video player with shared liquid controls and WebGL refraction.

0:00 / 0:00

Installation

npx shadcn@latest add https://liquidcomponents.xyz/r/liquid-video-player.json

Usage

import { LiquidVideoPlayer } from "@/components/ui/liquid-video-player"

<LiquidVideoPlayer
  src="/media/demo.mp4"
  poster="/media/poster.webp"
  aria-label="Product demonstration"
/>

The timeline reuses LiquidSlider, including its endpoint spacing and input behavior. Video remains a native <video> element; WebGL only renders the refracted visual layer around controls and falls back safely when unavailable.

On this page