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-beta.32/media/background-video.js"></script>

Examples

Basic Usage

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>
  );
}

.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;
}

<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