# Background preset
The background video preset — a player, feature bundle, skin, and media for ambient video with no controls
`@videojs/react/background` is the preset for ambient background video with no user controls. It bundles `BackgroundVideoPlayer`, the `backgroundFeatures` bundle it is configured with, one chrome-less skin, and the `BackgroundVideo` media component, which autoplays, mutes, and loops. See [Presets](https://videojs.org/docs/framework/react/guides/presets) for how presets fit together and [Background video](https://videojs.org/docs/framework/react/guides/background-video) for building one.
## Import
```tsx
import { BackgroundVideo, BackgroundVideoPlayer, BackgroundVideoSkin } from '@videojs/react/background';
import '@videojs/react/background/skin.css';
```
## Usage
**App.tsx**
```tsx
import { BackgroundVideo, BackgroundVideoPlayer, BackgroundVideoSkin } from '@videojs/react/background';
import '@videojs/react/background/skin.css';
export function Hero() {
return (
);
}
```
## Player
`BackgroundVideoPlayer` is a [`Player`](https://videojs.org/docs/framework/react/reference/components/player) created by [`createPlayer`](https://videojs.org/docs/framework/react/reference/api/create-player) with `backgroundFeatures`. It provides the player store to its descendants and renders no DOM element of its own.
| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` | Content placed inside the player context: the skin, the media, and your own components. |
The bundle has no feature that takes player inputs, so `children` is the only prop. Unlike the other presets, this one exports no named props type.
The preset also exports a `usePlayer` hook typed to `backgroundFeatures`. Use it from any component inside `BackgroundVideoPlayer`; see [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player).
## Feature bundle
`backgroundFeatures` is the array of [features](https://videojs.org/docs/framework/react/guides/features) the player is configured with. The background media component handles autoplay, muting, and looping on its own:
`backgroundFeatures` is currently empty, so the player's store holds no feature state or actions.
Its type, `BackgroundFeatures`, is the matching empty tuple. Import it from the package root:
```tsx
import type { BackgroundFeatures } from '@videojs/react';
```
To add a feature, pass your own array to `createPlayer`. For example, add playback to drive a play button over the background video:
```tsx
import { createPlayer, playbackFeature } from '@videojs/react';
import { backgroundFeatures } from '@videojs/react/background';
const { Player, usePlayer } = createPlayer({
features: [...backgroundFeatures, playbackFeature],
});
```
## Skins
- [BackgroundVideoSkin](https://videojs.org/docs/framework/react/reference/components/background-video-skin) — the only skin, a chrome-less surface that sizes the video and renders no controls.
## Media
The preset exports [`BackgroundVideo`](https://videojs.org/docs/framework/react/reference/components/background-video), which renders a native `