Customize skins

Start with the path that matches the change you want:

Style a packaged skin

Use a packaged skin’s public settings to match it to your site without copying its source into your project.

Set the skin’s styles

Packaged skins expose CSS custom properties for their supported visual changes. Set them on the skin or any element that contains it:

<video-skin style="--media-accent-color: #f5c518; --media-border-radius: 1rem">
  <video src="video.mp4"></video>
</video-skin>

<VideoSkin
  style={
    {
      '--media-accent-color': '#f5c518',
      '--media-border-radius': '1rem',
    } as React.CSSProperties
  }
>
  <Video src="video.mp4" />
</VideoSkin>

If you omit --media-accent-text-color, the skins choose a contrasting text color from --media-accent-color using contrast-color(). Set it only when you want a different result.

The skins use Inter when your page loads it and fall back to the system UI font. Video.js does not load the webfont for you. Set --media-font-family to use another font.

The media element and poster share --media-object-fit and --media-object-position, so a cover poster stays aligned with cover video. See Add a poster and loading placeholder.

Set the color scheme

The audio skins adapt their main palette for light and dark mode using light-dark(). They read the inherited color-scheme, so set it on the player or an element that contains it:

:root {
  color-scheme: light dark;
}

The video skins keep their dark controls in both color schemes. Only their hairline border follows the scheme, and --media-border-color replaces it.

Scale from the document font size

The skins derive control spacing, icon sizes, and text from --media-scale-unit. It defaults to 16px, so the player does not change with the document root font size or your app’s Tailwind spacing scale. Set it to 1rem to make the interface scale from the document root font size:

.player {
  --media-scale-unit: 1rem;
}

In fullscreen, the skins increase the unit up to 1.75 times on displays 1920 pixels and wider. This keeps controls legible from a distance.

You can also add your own class names to the skins.

Know where packaged styling stops

The properties above are the public styling settings for packaged skins. Do not depend on the elements, class names, or other custom properties inside a packaged skin. They may change between releases.

See Poster.

Packaged skins do not provide settings for adding, removing, or rearranging controls, or for replacing built-in feedback and interactions. To make those changes, eject the closest skin and edit its source.

Eject and edit a skin

If a packaged skin is close to the interface you want, eject it and edit the copy in your project. Ejecting turns the skin’s controls, layout, styles, and interactions into app code that you own.

Video.js publishes the skin source in a catalog of installable files. The shadcn CLI is the command-line tool that copies those files into your project, whether you use React or HTML.

Set up the shadcn CLI

If your project does not have a components.json configuration file, create one:

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bunx --bun shadcn@latest init

Choose how the skin is styled

HTML skins install as vanilla CSS.

Connect the CLI to Video.js

Run this command once. It saves @videojs as a short prefix in components.json, so later commands can use names such as @videojs/video:

npx shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/html/{name}.json

pnpm dlx shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/html/{name}.json

yarn dlx shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/html/{name}.json

bunx --bun shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/html/{name}.json

Install a skin

Install the skin closest to the interface you want. Default skins use the preset name, and Minimal skins add -minimal:

npx shadcn@latest add @videojs/video

pnpm dlx shadcn@latest add @videojs/video

yarn dlx shadcn@latest add @videojs/video

bunx --bun shadcn@latest add @videojs/video

The paths in the table start from the component location configured in components.json. The background video skin cannot be ejected.

Use the installed skin

Edit the installed files

Start with the file that owns the change you want:

Inspect or update an ejected skin

Use the CLI’s search command to find source and view to inspect it before installation:

npx shadcn@latest search @videojs --query volume
npx shadcn@latest view @videojs/video

Installed files belong to your project, so an update replaces your local copy. Commit your changes, reinstall with --overwrite, and review the resulting version-control diff before keeping it:

npx shadcn@latest add @videojs/video --overwrite

To understand how skins fit into Video.js, read Skins. To create a control instead of editing one, follow Build your own component.