BackgroundVideo

Decorative background video element with automatic muting and looping

Decorative background video. By default it’s muted, looped, and autoplaying — use the opt-out attributes below to change that. Renders a <video> inside a shadow DOM, positioned to fill its container.

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 the video source.
`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.