# background-video-skin

The background preset's chrome-less skin for ambient video

The only skin of the background preset: a chrome-less surface that sizes ambient video with no visible controls. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the background preset ships.

## Import

```ts
import '@videojs/html/background/skin';
```

The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/background.js"></script>
```

## Usage

The skin goes between the player and the media element. It sizes the ambient video and renders no visible controls.

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

## Styling

Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. [Customize skins](../../guides/customize-skins.md#style-a-packaged-skin) documents the properties.

## Own the UI

Owning the UI means keeping its components, layout, styles, and interactions as local files you can change. The [Shadcn installation guide](../../guides/installation-shadcn.md) adds that source for supported skins. The registry does not provide background video skin source because it has no control UI. Follow [Add a background video](../../guides/background-video.md) to compose the media directly, then add only the UI your use case needs.