Skins

A skin wraps the media component and provides the player’s complete interface. It combines a specific set of UI components with the styles that arrange and present them.

Choose a skin

The video, audio, live video, and live audio presets each provide four skins: Default, Neutral, Compat, and Scaffold. Compare them on three questions: which features you need, how much of the design you want to bring, and how consistently the player should look across browsers.

• Default is our design, with frosted surfaces and a modern look. Choose it when you want the player to look like Video.js.
• Neutral has the same controls in a lighter design, closer to a classic control bar. Choose it to apply your brand to a finished design: set your accent color, font, and corner radius through CSS custom properties.
• Compat has plain, unbranded surfaces. Choose it when the player should blend into content pages, such as an encyclopedia article. It avoids backdrop blur, anchor-positioned menu highlights, and squircle corners, which some browsers render differently or skip.
• Scaffold has Compat’s controls with minimal styling: square corners, no shadows or blur, your page’s font, and no transitions. Choose it as the foundation for your own design, when you plan to restyle the whole player rather than brand a finished one.

All four skins support the same browsers, keyboard shortcuts, and gestures. To build your own design instead, add Scaffold’s source to your project, start from another skin’s source, or build a custom interface.

Packaged skins and skin source

When you choose a skin, you can import the packaged version or add its source to your project. It’s usually easiest to start with a packaged skin and add its source when you need more customization.

Packaged skins cover common visual changes through documented CSS custom properties. Packaged video skins also let you replace the poster. When you need more than that, add the skin source to your project and change the components and styles directly.

Packaged skin

<script type="module">
  import '@videojs/html/video/player';
  import '@videojs/html/video/skin';
</script>

<video-player>
  <video-skin>
    <video src="video.mp4"></video>
  </video-skin>
</video-player>

Don’t depend on elements, class names, or undocumented custom properties inside a packaged skin. They may change between releases.

Skin source in your project

The skin source contains the complete interface. You can add, remove, rearrange, or restyle any part of it.

Custom interface

You can also build an interface without starting from a skin. In that model, you choose and arrange individual UI components around the media. This takes more work, but it avoids inheriting a skin’s layout and interactions.

Skins, features, and presets

Each skin is built with specific features in mind. For example, a video skin renders fullscreen and picture-in-picture controls. An audio skin doesn’t.