Skins

A skin wraps the media component and provides the player’s complete interface. It combines a specific set of UI components with the styles that arrange and present them.

Packaged and source-owned skins

When you choose a skin you have two options for how you use it: packaged or source-owned. It’s usually easiest to start with a packaged skin and later install its source into your project when you need more customization.

Packaged skins cover common visual changes through documented CSS custom properties. Packaged video skins also let you replace the poster. When you need more than that, install and change the components and styles directly.

Packaged skin

<script type="module">
  import '@videojs/html/video/player';
  import '@videojs/html/video/skin';
</script>

<video-player>
  <video-skin>
    <video src="video.mp4"></video>
  </video-skin>
</video-player>

import { Video, VideoPlayer, VideoSkin } from '@videojs/react/video';
import '@videojs/react/video/skin.css';

export function Player() {
  return (
    <VideoPlayer>
      <VideoSkin>
        <Video src="video.mp4" />
      </VideoSkin>
    </VideoPlayer>
  );
}

Don’t depend on elements, class names, or undocumented custom properties inside a packaged skin. They may change between releases.

Source-owned skin

The hosted Video.js registry installs a skin’s UI components and styles as app code that you own. You can add, remove, rearrange, or restyle any part of it.

pnpm dlx shadcn@latest add https://shadcn.videojs.org/r/html/video.json

pnpm dlx shadcn@latest add https://shadcn.videojs.org/r/react/video.json

The Video.js Shadcn registry supports React and HTML, Tailwind and vanilla CSS, editable Skin blocks, and individual styled React UI components. Players and media remain package imports.

Skins, features, and presets

Each skin is built with specific features in mind. For example, a video skin renders fullscreen and picture-in-picture controls. An audio skin doesn’t.

You’ll find a preconfigured player, its typed hook, a skin, and the matching feature bundle exported from the same path. We call these paths presets.

Styling

Packaged skins use vanilla CSS. Their documented CSS custom properties cover common visual changes.

To use Tailwind or change the underlying CSS, install the skin source and edit its styles in your app.

Shared limitations

• Skin spacing and icons use a fixed 16px base by default. Vanilla CSS font sizes use the same base, while Tailwind font sizes use rem units and assume a 16px root font size.
• The default font stack includes Inter, but we do not load the webfont for you. If Inter is unavailable, the skin uses system fonts.

Source-owned vanilla CSS

• We use a BEM classname structure and every component classname is scoped with a media- prefix.

Source-owned Tailwind

• Source-owned skins establish their own spacing scale but otherwise assume the default configuration.
• Source-owned skins currently support Tailwind 4.3.x.