# 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](https://videojs.org/docs/framework/html/guides/skins) for how packaged skins work and [Presets](https://videojs.org/docs/framework/html/guides/presets) 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](https://videojs.org/docs/framework/html/guides/cdn) 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.4/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](https://videojs.org/docs/framework/html/guides/customize-skins#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](https://videojs.org/docs/guides/installation/shadcn?framework=html) 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](https://videojs.org/docs/framework/html/guides/background-video) to compose the media directly, then add only the UI your use case needs.

---

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