ReferenceMedia

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 to change its playback defaults.

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

Import

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

Or load it from the CDN:

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

Examples

Basic Usage

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

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

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.