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 — use the opt-out attributes below to change that. It renders a <video> inside a shadow DOM and fills the box you give the component.

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.

Examples

Basic Usage

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

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

.container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

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