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

const Player = createPlayer({ features: [...features.video] });

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

Minimal

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

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

const Player = createPlayer({ features: [...features.video] });

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

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