# Customize skins

Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions

Start with the path that matches the change you want:

| If you want to… | Use this path |
| --- | --- |
| Change colors, typography, sizing, or how the poster fills the player | [Style a packaged skin](#style-a-packaged-skin). The skin stays in the Video.js package, and you set its supported CSS properties. |
| Add, remove, rearrange, or deeply restyle controls; change layout or interactions | [Style skin source](#style-skin-source). The `shadcn` CLI adds the skin source to your project so you can change it. |

## Style a packaged skin

Use a packaged skin’s public settings to match it to your site without copying its source into your project.

### Set the skin’s styles

Packaged skins expose [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for their supported visual changes. Set them on the skin or any element that contains it:

```html
<video-skin style="--media-accent-color: #f5c518; --media-border-radius: 1rem">
  <video src="video.mp4"></video>
</video-skin>
```

| Property name | What it changes | Value | Example |
| --- | --- | --- | --- |
| `--media-accent-color` | Slider fills, highlighted controls and menu items, and primary actions | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#f5c518` |
| `--media-accent-text-color` | Text and icons shown on the accent color | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `black` |
| `--media-border-color` | The hairline around the player | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `transparent` |
| `--media-border-radius` | The player corner radius | A valid [border-radius value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-radius#values) | `1rem` |
| `--media-font-family` | The player interface font stack | A valid [font-family value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family) | `Roboto, sans-serif` |
| `--media-object-fit` | How the media and poster fill the player | A valid [object-fit value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) | `cover` |
| `--media-object-position` | Where the media and poster sit when they do not fill the player | A valid [object-position value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-position) | `top` |
| `--media-scale-unit` | The base size for skin spacing, icons, and text | [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length) | `1rem` |

If you omit `--media-accent-text-color`, the skins choose a contrasting text color from `--media-accent-color` using [`contrast-color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/contrast-color). Set it only when you want a different result.

The skins use [`Inter`](https://rsms.me/inter/) when your page loads it and fall back to the system UI font. Video.js does not load the webfont for you. Set `--media-font-family` to use another font.

The media element and poster share `--media-object-fit` and `--media-object-position`, so a `cover` poster stays aligned with `cover` video. See [Add a poster and loading placeholder](https://videojs.org/docs/framework/html/guides/poster).

### Set the color scheme

The audio skins adapt their main palette for light and dark mode using [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark). They read the inherited [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme), so set it on the player or an element that contains it:

```css
:root {
  color-scheme: light dark;
}
```

The video skins keep their dark controls in both color schemes. Only their hairline border follows the scheme, and `--media-border-color` replaces it.

### Scale from the document font size

The skins derive control spacing, icon sizes, and text from `--media-scale-unit`. It defaults to `16px`, so the player does not change with the document root font size or your app’s Tailwind spacing scale. Set it to `1rem` to make the interface scale from the document root font size:

```css
.player {
  --media-scale-unit: 1rem;
}
```

In fullscreen, the skins increase the unit up to 1.75 times on displays 1920 pixels and wider. This keeps controls legible from a distance.

You can also add your own class names to the skins.

### Know where packaged styling stops

The properties above are the public styling settings for packaged skins. Do not depend on the elements, class names, or other custom properties inside a packaged skin. They may change between releases.

Packaged video skins also let you replace the poster through the `poster` slot.

See [`<media-poster>`](https://videojs.org/docs/framework/html/reference/components/poster).

Packaged skins do not provide settings for adding, removing, or rearranging controls, or for replacing built-in feedback and interactions. To make those changes, [add the source for the closest skin to your project](#style-skin-source) and edit it directly.

## Style skin source

If a packaged skin is close to the interface you want, add its source to your project and edit it. The source contains the skin’s controls, layout, styles, and interactions.

Video.js publishes skin source in an installable catalog. The [`shadcn` CLI](https://ui.shadcn.com/docs/cli) adds that source to your project, whether you use React or HTML.

The selected skin is generally placed under `components/videojs/<preset>`, with shared controls and styles alongside it under `components/videojs`. The exact root follows the components alias in `components.json`. The CLI can also install package dependencies, update `components.json`, and add shared styles to your main CSS file.

> **Note**
>
> Commit your work before installing or updating source. You can then review every file the CLI adds or replaces.

### Add the source

The Shadcn installation guide handles project setup, lets you choose the skin and styling, and shows how to use the installed source in a working player.

- [Install Video.js with Shadcn](https://videojs.org/docs/guides/installation/shadcn?framework=html): Add editable skin source and build a working React or HTML player

### Use the installed skin

The skin directory contains `skin.html`, `skin.ts`, and `skin.css`. Keep importing the player and media from `@videojs/html`. Import the installed `skin.ts` once, then paste the markup from `skin.html` inside your player around the media element.

### Edit the installed files

Start with the file that owns the change you want:

| Goal | Where to start |
| --- | --- |
| Add, remove, or rearrange controls | `skin.html` |
| Change default colors, surfaces, shadows, sizes, or motion across skins | `components/videojs/styles/themes/theme.css` |
| Change only the Minimal theme or one media preset | `components/videojs/styles/themes/minimal.css`, `components/videojs/styles/video/theme.css`, or `components/videojs/styles/audio/theme.css` |
| Change one control’s appearance | That control’s classes or stylesheet |
| Change one control’s interaction | That control’s module |

The `skin.html` file contains the layout. The `skin.ts` module registers the custom elements and loads `skin.css`. Elements use class names that start with `media-`; change a class in `skin.html` or a rule in the stylesheet to change one part of the interface.

### Inspect or update the skin source

Use the CLI’s `search` command to find source and `view` to inspect it before installation:

```bash
npx shadcn@latest search @videojs --query volume
npx shadcn@latest view @videojs/video
```

Installed files belong to your project, so an update replaces your local copy. Commit your changes, reinstall with `--overwrite`, and review the resulting version-control diff before keeping it:

```bash
npx shadcn@latest add @videojs/video --overwrite
```

To understand how skins fit into Video.js, read [Skins](https://videojs.org/docs/framework/html/guides/skins). To create a control instead of editing one, follow [Build your own component](https://videojs.org/docs/framework/html/guides/build-your-own-component).

## Related pages

### Components

- [video-skin](https://videojs.org/docs/framework/html/reference/components/video-skin): The video preset's default skin with the modern, frosted look

### Guides

- [Skins](https://videojs.org/docs/framework/html/guides/skins): Packaged player designs that include both UI components and their styles.
- [Build your own UI component](https://videojs.org/docs/framework/html/guides/build-your-own-component): Create custom player controls that read state, dispatch actions, and stay accessible.

---

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