Skip to content

ReferenceMedia

BackgroundVideo

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.

BackgroundVideo renders a native <video>. Override the defaults with native React props such as muted={false}, loop={false}, or autoPlay={false}, and size the video with className or style. Its ref and mediaRef both resolve to that HTMLVideoElement.

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 { BackgroundVideo } from '@videojs/react/media/background-video';

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

API

BackgroundVideo accepts native <video> props. Its ref and mediaRef both resolve to the rendered HTMLVideoElement.

Styling

BackgroundVideo is the native <video> element. Set its size, object-fit, and object-position through className or style.