MuxBackgroundVideo

Mux-specific name for the HLS background video component

MuxBackgroundVideo is the Mux-specific name for HlsBackgroundVideo. The two names use the same implementation and API.

Use this name when your source is a Mux HLS URL and the Mux identity makes the composition easier to read. See Add a background video to compare the background-video options.

Import

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

Load a Mux source

Pass a complete Mux HLS URL through src. This component does not take a playback ID or structured source object. Use Mux delivery query parameters to limit which renditions Mux includes in the manifest:

<MuxBackgroundVideo
  src="https://stream.mux.com/PLAYBACK_ID.m3u8?max_resolution=720p"
  crossOrigin="anonymous"
/>

MuxBackgroundVideo does not create a poster or preview thumbnails, and it does not send analytics data. Keep the poster in your page and add analytics separately when you need them.

API

The source, error, fixed playback behavior, and CSS custom properties are identical to HlsBackgroundVideo.