# BackgroundVideo

Decorative background video element with automatic muting and looping

Decorative background video for a source the browser can play natively. By default it’s muted, looped, and autoplaying.

`BackgroundVideo` renders a native `<video>`. Override the defaults with native React props such as `muted={false}`, `loop={false}`, or `autoPlay={false}`, and size the video with `className` or `style`.

An HLS URL only works where the browser has native HLS playback. See [Add a background video](https://videojs.org/docs/framework/react/guides/background-video) to choose a cross-browser HLS or Mux path and set up layout, poster, and decorative semantics.

## Import

```tsx
import { BackgroundVideo } from '@videojs/react/media/background-video';
```

## Examples

### Basic Usage

**App.tsx**

```tsx
import { BackgroundVideo } from '@videojs/react/media/background-video';

export default function BasicUsage() {
  return (
    <div className="react-background-video-basic">
      <BackgroundVideo src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4" />
    </div>
  );
}
```

**App.css**

```css
.react-background-video-basic {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.react-background-video-basic > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```

## Styling

`BackgroundVideo` is the native `<video>` element, so size and position it with regular CSS. Use `object-fit` and `object-position` to control how the video fills its box.

---

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