Skins

Skins are complete, packaged player designs that include both UI components and their styles. Pick your favorite and use it as is, or copy its components into your project for customization.

Skins in v10+

In Video.js v8, skins were CSS-only themes applied to a fixed component structure. In v10+, skins are fundamentally different:

This means each skin can be completely unique—different layouts, different controls, different interactions. A streaming app skin can have a totally different structure than a news player skin.

Skins and Features

Skins are designed for specific feature sets. A skin includes UI components for the features it supports. If you add features the skin wasn’t designed for, you won’t get UI for them automatically—the skin only includes components for its intended features.

To add UI for new features, eject the skin and customize it.

The default video features offer multiple skins. VideoSkin is the default; Minimal is a clean alternative that’s easy to customize.

Built-in Skins

VideoSkin

The default skin—a modern, glassy design with backdrop blur effects and polished interactions.

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

const { Provider } = createPlayer({
  features: features.video(),
});

<Provider>
  <VideoSkin>
    <video src="video.mp4" />
  </VideoSkin>
</Provider>

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

Minimal

A clean, straightforward design that focuses on simplicity. A good starting point for customization.

import { createPlayer, features } from '@videojs/react';
import { MinimalSkin } from '@videojs/react/skin/minimal';
import '@videojs/react/skin/minimal.css';

const { Provider } = createPlayer({
  features: features.video(),
});

<Provider>
  <MinimalSkin>
    <video src="video.mp4" />
  </MinimalSkin>
</Provider>

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

Customizing Skins

Eject and Modify

Instead of overriding styles from the outside, eject a skin into your project. This copies all the components and styles in your framework of choice, giving you full control. Inspired by shadcn/ui and Create React App’s eject .

A CLI for ejecting skins is coming soon. For now, you can manually copy a skin’s components and styles from its documentation page.

Build from Scratch

A skin is a component that:

import { MediaContainer, PlayButton, TimeSlider } from '@videojs/react';

export function CustomSkin({ children, className }) {
  return (
    <MediaContainer className={className}>
      {children}
      <div className="controls">
        <PlayButton />
        <TimeSlider.Root>
          <TimeSlider.Track>
            <TimeSlider.Progress />
          </TimeSlider.Track>
          <TimeSlider.Thumb />
        </TimeSlider.Root>
      </div>
    </MediaContainer>
  );
}

<!-- Custom skin element - UI primitives use media-* namespace -->
<media-container class="custom-skin">
  <slot></slot>
  <div class="controls">
    <media-play-button></media-play-button>
    <media-time-slider></media-time-slider>
  </div>
</media-container>

import { createSkin } from '@videojs/html';

const { SkinElement } = createSkin(/* ... */);

// {style}-{mediatype}-skin
SkinElement.define('custom-video-skin');

See Also

• UI Components — The primitives skins are built from
• Features — State and behavior bundles
• Architecture — Where skins fit in the three-pillar model