Skins

Understanding skins in Video.js v10 - packaged sets of UI components and styles

In Video.js v10, skins are complete, packaged player designs that include both UI components and their styles. This is a significant change from v8, where skins were purely CSS themes applied to a fixed component structure.

What’s different in v10?

Video.js v8 skins

CSS-only themes
Applied to a fixed component structure
Limited customization without JavaScript

Video.js v10 skins

UI components + styles packaged together
Each skin can have completely different components
Can address entirely different use cases
Only include the components they need

Built-in skins

Frosted

A modern, glassy design with backdrop blur effects and polished interactions.

import { VideoProvider, FrostedSkin, Video } from '@videojs/react-preview';
import '@videojs/react-preview/skins/frosted.css';

<VideoProvider>
  <FrostedSkin>
    <Video src="video.mp4" />
  </FrostedSkin>
</VideoProvider>

<video-provider>
  <media-skin-frosted>
    <video slot="media" src="video.mp4"></video>
  </media-skin-frosted>
</video-provider>

0:00

Minimal

A clean, straightforward design that focuses on simplicity and clarity.

import { VideoProvider, MinimalSkin, Video } from '@videojs/react-preview';
import '@videojs/react-preview/skins/minimal.css';

<VideoProvider>
  <MinimalSkin>
    <Video src="video.mp4" />
  </MinimalSkin>
</VideoProvider>

<video-provider>
  <media-skin-minimal>
    <video slot="media" src="video.mp4"></video>
  </media-skin-minimal>
</video-provider>

0:00/0:00

0:00

Customizing skins

Skins are designed to be ejected and modified for your specific needs.

Ready to make it your own? Learn how to customize a skin →

Building your own skin

A skin is simply a component that:

Wraps content in a media-container
Includes a <slot> element (for the media renderer)
Arranges UI components as desired
Provides styles for those components

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

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>
  );
}

<video-provider>
  <media-container class="custom-skin">
    <slot></slot>
    <div class="controls">
      <media-play-button></media-play-button>
      <media-time-slider>
        <!-- Custom skin structure -->
      </media-time-slider>
    </div>
  </media-container>
</video-provider>

Read more about components in the components guide →

Coming soon

More built-in skins for different use cases
CLI tool for ejecting and customizing skins