Components

Video Player

Plays video in the page with full controls: play, progress, skip 30 seconds, volume, settings and full screen. The small size is a titled thumbnail that opens the player.

Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry is coming soon. Until then, these are the commands you will run.

npx ritla add video-player

Also works with shadcn: npx shadcn@latest add @ritla/video-player

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

import { VideoPlayer } from "@/components/ui/video-player";

<VideoPlayer
  src="/videos/wallet.webm"
  poster="/videos/wallet.webp"
  title="Set up your wallet"
  captions={[{ src: "/videos/wallet.ar.vtt", srcLang: "ar", label: "العربية", default: true }]}
/>

Examples

Titled thumbnails

The small size (size="sm") is a button that opens the video, with a title and a line above it for the part and length. In Arabic the text starts on the right; the play icon doesn't turn.

Get the code ›

API reference

VideoPlayer

Prop	Type	Default	Description
`src / poster`	`string`	None	The video, and the poster before playback; pick one that shows what it is about.
`title`	`string`	None	What the video is: the player's name, printed on the small size.
`size`	`"lg" \| "sm"`	`"lg"`	Figma's Size: lg plays in place; sm is a thumbnail that opens it.
`overline`	`ReactNode`	None	A short line above the title on the small size (part and length).
`captions`	`{ src, srcLang, label, default? }[]`	None	Caption tracks (WebVTT); offer Arabic captions on Arabic pages.
`onNext`	`() => void`	None	The Next button; hidden without it.
`onOpen`	`() => void`	None	On the small size: opens the video (in a Dialog or a page).

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Space`	Plays or pauses when the player has focus.
`ArrowLeftArrowRight`	Back or forward 5 seconds, the same way in Arabic; on the seek bar, one second.
`M`	Mutes or unmutes.
`F`	Enters or leaves full screen.

ARIA

Every control is a named button (Play, Pause, Back 30 seconds); the name follows the state.
The seek bar is a slider that reads the time as text: “0:23 of 4:39”.
Controls show while paused and on hover, focus or tap, and never hide while paused.
No autoplay; captions are a choice in settings, not burned into the picture.

Arabic and RTL notes

Mirrors

The small size's title and overline, the captions, the settings menu and the layout around the player.

Does not mirror

The control bar, as in English: play first, the seek bar filling left to right, full screen last.
Back 30 seconds on the left, forward on the right, and the play arrow pointing right.
Times read left to right, and the arrow keys seek the same way.

Numerals: Times in Western digits unless the product uses Arabic-Indic.
Arabic typography: Times body-12 Semibold in white; the small size's title body-16 Semibold over a body-12 line.
Mixed-direction text: The control bar is an LTR island inside the Arabic page.