FrameworkStyle

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';
import '@videojs/react/skins/frosted.css';

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

Minimal

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

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

<VideoProvider>
  <MinimalSkin>
    <Video src="video.mp4" />
  </MinimalSkin>
</VideoProvider>
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:

  1. Wraps content in a MediaContainer
  2. Includes a children prop (for the media renderer)
  3. Arranges UI components as desired
  4. Provides styles for those components 
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>
  );
}

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
VideoJS