Skip to content
FrameworkStyle

Customize skins

Learn the public customization surface for packaged and source-owned Video.js skins

Video.js v10 comes with Default and Minimal skins. Start with their public CSS custom properties. When you need to change controls, layout, or interactions, install the closest skin’s source into your project and make it your own.

Basic customization

Set these CSS custom properties directly on the skin:

<video-skin style="--media-accent-color: #f5c518; --media-border-radius: 1rem">
  <video src="video.mp4"></video>
</video-skin>
Property Name Description Type Example
--media-accent-color The color of slider fills and accented controls <color> #f5c518
--media-accent-text-color The color of text and icons shown on the accent color <color> black
--media-border-radius The border radius of the media player A valid border-radius value 1rem
--media-scale-unit The base sizing unit for skin spacing and icons <length> 1rem

If you omit --media-accent-text-color, the skins choose a contrasting text color from --media-accent-color using contrast-color(). You only need to set it when you want to override that result.

Set the audio color scheme

The audio skins adapt their main palette for light and dark mode using light-dark(). It uses the inherited color-scheme, so set color-scheme on the player or an ancestor:

:root {
  color-scheme: light dark;
}

The video skins keep their dark control presentation in both color schemes.

Scale with the document font size

Vanilla CSS and Tailwind skins use --media-scale-unit as the base for control spacing and icon sizes. Vanilla CSS skins also use it for font sizes. It defaults to 16px, so player sizing does not change with the document root font size or the app’s Tailwind spacing scale. Set it to 1rem on the player or an ancestor to make the UI scale with the document root font size:

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

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

Where packaged customization stops

The four properties above are the public styling controls for packaged skins. Don’t depend on the elements, classnames, or other custom properties inside a packaged skin. They may change between releases.

Packaged video skins also let you replace the poster through the poster slot.

See Poster.

For anything deeper, install the source instead of reaching into the packaged skin. There are no packaged-skin options for adding, removing, or rearranging controls, or replacing its built-in feedback and interactions. Seek buttons are a common example: the audio skins include 10-second skip-back and skip-forward buttons, but the video skins ship without them. To add rewind and fast-forward controls to a video skin, install it and place a SeekButton in the control bar.

Install an editable skin

The hosted Video.js registry installs a complete skin and its dependencies into your project. The installed files are ordinary app code, so their markup, class names, and styles are yours to change. Configure the @videojs registry namespace for your framework and styling choice first.

npx shadcn@latest add @videojs/video

The same item name works for React or HTML and Tailwind or CSS; the configured namespace URL chooses the catalog. Add -minimal for the Minimal layout, for example @videojs/video-minimal. Audio and live presets follow the same pattern.

If none of the provided skins is a useful starting point, build a custom UI from the player, container, and individual UI components instead.

Install editable Video.js source with Shadcn

Related guides