# background-video

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.

`<background-video>` renders a `<video>` inside shadow DOM and fills the box you give the component. Use the opt-out attributes in the [API reference](#api-reference) to change its playback defaults.

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

## Import

```ts
import '@videojs/html/media/background-video';
```

Or load it from the [CDN](../../guides/cdn.md):

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

## Examples

### Basic Usage

**index.html**

```html
<div class="container">
  <background-video src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4"></background-video>
</div>
```

**index.css**

```css
.container {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
}
```

**index.ts**

```ts
import '@videojs/html/media/background-video';
```

## API Reference

### Attributes

| Attribute | Description |
| --- | --- |
| `src` | URL of a video the browser can play directly, such as an MP4 or WebM file. |
| `nomuted` | Opt out of muted playback. By default the video is muted. |
| `noloop` | Opt out of looped playback. By default the video loops. |
| `noautoplay` | Opt out of autoplay. By default the video autoplays. |

### CSS Custom Properties

| Variable | Default | Description |
| --- | --- | --- |
| `--media-object-fit` | `inherit` | Controls how the video fits its container. |
| `--media-object-position` | `50% 50%` | Controls the position of the video within its container. |