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.

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

Styling

BackgroundVideo is the native <video> element, so size and position it with regular CSS. Use object-fit and object-position to control how the video fills its box.