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 { createPlayer, Poster } from '@videojs/react';
import { VideoSkin, Video, videoFeatures } from '@videojs/react/video';
import '@videojs/react/video/skin.css';

const Player = createPlayer({ features: videoFeatures });

export function VideoPlayer() {
  return (
    <Player.Provider>
      <VideoSkin className="w-full aspect-video">
        <Video src="video.mp4" />
        <Poster src="poster.webp" />
      </VideoSkin>
    </Player.Provider>
  );
}

Something went wrong.

An error occurred while trying to play the video. Please try again.

Minimal

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

import { createPlayer, Poster } from '@videojs/react';
import { MinimalVideoSkin, Video, videoFeatures } from '@videojs/react/video';
import '@videojs/react/video/minimal-skin.css';

const Player = createPlayer({ features: videoFeatures });

export function VideoPlayer() {
  return (
    <Player.Provider>
      <MinimalVideoSkin className="w-full aspect-video">
        <Video src="video.mp4" />
        <Poster src="poster.webp" />
      </MinimalVideoSkin>
    </Player.Provider>
  );
}

Something went wrong.

An error occurred while trying to play the video. Please try again.

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