---
title: Skins
description: Packaged player designs that include both UI components and their styles.
---

import PresetReference from '@/components/docs/api-reference/PresetReference.astro';
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import { FrostedSkinDemo } from '@/examples/react/FrostedSkin/FrostedSkinDemo';
import { MinimalSkinDemo } from '@/examples/react/MinimalSkin/MinimalSkinDemo';
import MinimalFrame from '@/components/frames/Minimal.astro';
import DocsLink from '@/components/docs/DocsLink.astro';
import DocsLinkCard from '@/components/docs/DocsLinkCard.astro';
import Aside from '@/components/Aside.astro';
import EjectedSkin from '@/components/docs/EjectedSkin.astro';

<Aside type="note" title="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.
</Aside>

<FrameworkCase frameworks={["html"]}>

```html
<video-player>
  <video-skin><!-- [!code focus] -->
    <!-- wraps the media element --> <!-- [!code focus] -->
    <video src="video.mp4"></video>
  </video-skin><!-- [!code focus] -->
</video-player>
```

</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
```tsx
<Player.Provider>
  <VideoSkin> {/* [!code focus] */}
    {/* wraps the Media component */} {/* [!code focus] */}
    <Video src="video.mp4"></Video>
  </VideoSkin> {/* [!code focus] */}
</Player.Provider>
```
</FrameworkCase>

## Packaged vs. ejected

When you choose a skin you have two options for how you use it: **packaged** or **ejected**. It's usually easiest to start with a packaged skin and later eject its internal components into your project when you need more customization.

| Packaged | Ejected |
|----------|-----------------|
| Single component | Many UI components |
| Limited customization | Complete customization |
| Future design updates auto-applied by bumping the version | Future design updates manually applied, or intentionally ignored |

<DocsLinkCard slug="how-to/customize-skins">Read more about ejecting skins</DocsLinkCard>
<DocsLinkCard slug="concepts/ui-components">Read more about UI Components</DocsLinkCard>

### Example of packaged

<FrameworkCase frameworks={["html"]}>

```html
  <video-player>
    <video-skin>
      <!--...Media...-->
    </video-skin>
  </video-player>

```

</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
```tsx
  <Player.Provider>
    <VideoSkin>
      {/* ...Media... */}
    </VideoSkin>
  </Player.Provider>
```
</FrameworkCase>

### Example of ejected

<FrameworkCase frameworks={["html"]}>
  <EjectedSkin id="default-video" />
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
  <EjectedSkin id="default-video-react" />
</FrameworkCase>

## Skins, features, and presets

Each skin is built with specific <DocsLink slug="concepts/features">features</DocsLink> in mind. For example, a video skin renders fullscreen and picture-in-picture controls. An audio skin doesn't.

You'll find both a skin and the feature bundle it expects exported from the same path. We call these paths **presets**. 

<PresetReference />

Presets are a topic quite a bit bigger than just this guide. To learn more, check out the guide:

<DocsLinkCard slug="concepts/presets">Read about presets</DocsLinkCard>

## Styling

There are currently two options for styling:

<FrameworkCase frameworks={["react"]}>

- Vanilla CSS — import the stylesheet listed for each skin in the [preset table](#skins-features-and-presets). This is the default.
- Tailwind where you [eject](../how-to/customize-skins#ejecting) the skin and use Tailwind classnames in your app.

</FrameworkCase>

<FrameworkCase frameworks={["html"]}>

- Vanilla CSS that's automatically imported. This is the default.
- Tailwind where you [eject](../how-to/customize-skins#ejecting) the skin and use Tailwind classnames in your app.

</FrameworkCase>

### Current limitations

- In both style systems we assume a 16px root font size and we use rem units for sizing.
- The default font stack includes [`Inter`](https://rsms.me/inter/) (because it's awesome) but we do not load the webfonts for you. If they are not available then system fonts are used.

These only apply to ejected HTML and React skins:

#### Vanilla CSS

- We use a [BEM](https://en.bem.info/methodology/quick-start/) classname structure and every component classname is scoped with a `media-` prefix.

#### Tailwind

- Currently we're assuming you're using the default configuration and that's all that's supported. With the release of our CLI, this will change, allowing you to specify a custom prefix to the Tailwind classnames. For now, you'll need to edit the ejected skins yourself.
- We're assuming the latest version, currently 4.2.x.
