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:

<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.

Packaged skins do not provide settings for adding, removing, or rearranging controls, or for replacing built-in feedback and interactions. To make those changes, add the source for the closest skin to your project and edit it directly.

Style skin source

If a packaged skin is close to the interface you want, add its source to your project and edit it. The source contains the skin’s controls, layout, styles, and interactions.

Video.js publishes skin source in an installable catalog. The shadcn CLI adds that source to your project, whether you use React or HTML.

The selected skin is generally placed under components/videojs/<preset>, with shared controls and styles alongside it under components/videojs. The exact root follows the components alias in components.json. The CLI can also install package dependencies, update components.json, and add shared styles to your main CSS file.

Add the source

The Shadcn installation guide handles project setup, lets you choose the skin and styling, and shows how to use the installed source in a working player.

Use the installed skin

Edit the installed files

Start with the file that owns the change you want:

Inspect or update the skin source

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.

Related pages