# BackgroundVideoSkin

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/react/guides/skins) for how packaged skins work and [Presets](https://videojs.org/docs/framework/react/guides/presets) for what the background preset ships.

## Import

```tsx
import { BackgroundVideoSkin } from '@videojs/react/background';
import '@videojs/react/background/skin.css';
```

## Usage

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

```tsx
<BackgroundVideoPlayer>
  <BackgroundVideoSkin>
    <BackgroundVideo src="video.mp4" />
  </BackgroundVideoSkin>
</BackgroundVideoPlayer>
```

## 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/react/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=react) 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/react/guides/background-video) to compose the media directly, then add only the UI your use case needs.

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt