# Skins

Packaged player designs that include both UI components and their styles.

> **Note: New in version 10**
>
> In prior versions of Video.js, skins were CSS-only themes applied to the same set of default controls. In version 10 the concept of skins has been expanded to include the UI components, so each skin can be completely unique and only include the UI components it needs.

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.

## 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 | Skin source in your project |
| --- | --- |
| Single component | Many UI components |
| Documented CSS custom properties | Editable components and styles |
| Future design updates auto-applied by bumping the version | Future design updates manually applied, or intentionally ignored |

### Packaged skin

```html
<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.

- [Style a packaged skin](https://videojs.org/docs/framework/html/guides/customize-skins#style-a-packaged-skin)

### Skin source in your project

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

- [Style skin source](https://videojs.org/docs/framework/html/guides/customize-skins#style-skin-source)

### Custom interface

You can also build an interface without starting from a skin. In that model, you choose and arrange individual [UI components](https://videojs.org/docs/framework/html/guides/ui-components) around the media. This takes more work, but it avoids inheriting a skin’s layout and interactions.

- [Build your own component](https://videojs.org/docs/framework/html/guides/build-your-own-component)

## Skins, features, and presets

Each skin is built with specific [features](https://videojs.org/docs/framework/html/guides/features) in mind. For example, a video skin renders fullscreen and picture-in-picture controls. An audio skin doesn’t.

You’ll find a preconfigured player, its typed controller, a skin, and the matching feature bundle exported from the same path. We call these paths **presets**.

| Import | Description | Details |
| --- | --- | --- |
| `@videojs/html/video` | General-purpose video player preset with full playback controls. | **Feature bundle:** `videoFeatures`; **Features:** [playback](https://videojs.org/docs/framework/html/reference/api/feature-playback), [playbackRate](https://videojs.org/docs/framework/html/reference/api/feature-playback-rate), [quality](https://videojs.org/docs/framework/html/reference/api/feature-quality), [audioTrack](https://videojs.org/docs/framework/html/reference/api/feature-audio-track), [volume](https://videojs.org/docs/framework/html/reference/api/feature-volume), [time](https://videojs.org/docs/framework/html/reference/api/feature-time), [source](https://videojs.org/docs/framework/html/reference/api/feature-source), [buffer](https://videojs.org/docs/framework/html/reference/api/feature-buffer), [fullscreen](https://videojs.org/docs/framework/html/reference/api/feature-fullscreen), [pip](https://videojs.org/docs/framework/html/reference/api/feature-pip), [remotePlayback](https://videojs.org/docs/framework/html/reference/api/feature-remote-playback), [controls](https://videojs.org/docs/framework/html/reference/api/feature-controls), [textTrack](https://videojs.org/docs/framework/html/reference/api/feature-text-tracks), [error](https://videojs.org/docs/framework/html/reference/api/feature-error), [metadata](https://videojs.org/docs/framework/html/reference/api/feature-metadata); **Skins:** `<video-minimal-skin>`, `<video-skin>`; **Default media element:** `<video>` |
| `@videojs/html/audio` | Audio-only player preset with playback and volume controls. | **Feature bundle:** `audioFeatures`; **Features:** [playback](https://videojs.org/docs/framework/html/reference/api/feature-playback), [playbackRate](https://videojs.org/docs/framework/html/reference/api/feature-playback-rate), [volume](https://videojs.org/docs/framework/html/reference/api/feature-volume), [time](https://videojs.org/docs/framework/html/reference/api/feature-time), [source](https://videojs.org/docs/framework/html/reference/api/feature-source), [buffer](https://videojs.org/docs/framework/html/reference/api/feature-buffer), [error](https://videojs.org/docs/framework/html/reference/api/feature-error), [metadata](https://videojs.org/docs/framework/html/reference/api/feature-metadata); **Skins:** `<audio-minimal-skin>`, `<audio-skin>`; **Default media element:** `<audio>` |
| `@videojs/html/background` | Ambient background video preset with no user controls. | **Feature bundle:** `backgroundFeatures`; **Features:** –; **Skins:** `<background-video-skin>`; **Default media element:** `<background-video>` |
| `@videojs/html/live-audio` | Live audio player preset — `audio` minus playback rate, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveAudioFeatures`; **Features:** [playback](https://videojs.org/docs/framework/html/reference/api/feature-playback), [volume](https://videojs.org/docs/framework/html/reference/api/feature-volume), [time](https://videojs.org/docs/framework/html/reference/api/feature-time), [source](https://videojs.org/docs/framework/html/reference/api/feature-source), [buffer](https://videojs.org/docs/framework/html/reference/api/feature-buffer), [error](https://videojs.org/docs/framework/html/reference/api/feature-error), [live](https://videojs.org/docs/framework/html/reference/api/feature-live), [metadata](https://videojs.org/docs/framework/html/reference/api/feature-metadata); **Skins:** `<live-audio-minimal-skin>`, `<live-audio-skin>`; **Default media element:** `<audio>` |
| `@videojs/html/live-video` | Live video player preset — `video` minus playback rate, quality selection, and audio-track selection, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveVideoFeatures`; **Features:** [playback](https://videojs.org/docs/framework/html/reference/api/feature-playback), [volume](https://videojs.org/docs/framework/html/reference/api/feature-volume), [time](https://videojs.org/docs/framework/html/reference/api/feature-time), [source](https://videojs.org/docs/framework/html/reference/api/feature-source), [buffer](https://videojs.org/docs/framework/html/reference/api/feature-buffer), [fullscreen](https://videojs.org/docs/framework/html/reference/api/feature-fullscreen), [pip](https://videojs.org/docs/framework/html/reference/api/feature-pip), [remotePlayback](https://videojs.org/docs/framework/html/reference/api/feature-remote-playback), [controls](https://videojs.org/docs/framework/html/reference/api/feature-controls), [textTrack](https://videojs.org/docs/framework/html/reference/api/feature-text-tracks), [error](https://videojs.org/docs/framework/html/reference/api/feature-error), [live](https://videojs.org/docs/framework/html/reference/api/feature-live), [metadata](https://videojs.org/docs/framework/html/reference/api/feature-metadata); **Skins:** `<live-video-minimal-skin>`, `<live-video-skin>`; **Default media element:** `<video>` |

- [Read about presets](https://videojs.org/docs/framework/html/guides/presets)

---

HTML documentation: https://videojs.org/docs/framework/html/llms.txt
All documentation: https://videojs.org/llms.txt