FrameworkStyle

Skins

Packaged sets of video player UI components and styles that you can customize or replace

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>
PlayPause
0:00
0:00
0:00
Enter FullscreenExit Fullscreen

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>
PlayPause
0:00/0:00
0:00
Enter FullscreenExit Fullscreen

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

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