# Mux Background Video Mux Background Video is a lightweight component for adding background videos to your web application **Mux Background Video** is a lightweight component and HLS engine for creating background videos using Mux HLS streams. * **React**: React component for easy integration * **Web Component**: Custom element for easy integration * **Lightweight**: Minimal bundle size with no dependencies * **Preload Control**: Control video preloading behavior * **Audio Control**: Optionally enable audio tracks for background videos * **Resolution Control**: Set maximum resolution for optimal performance ## Quick start ## Installation ```bash npm install @mux/mux-background-video ``` ## Usage Requires Mux [Basic](https://www.mux.com/docs/guides/use-video-quality-levels#basic) or [Premium](https://www.mux.com/docs/guides/use-video-quality-levels#premium) video quality currently because transmuxing of `.ts` segments is not supported. ### HTML Custom Element The easiest way to use Mux Background Video is with the custom element: ```html Background Video Mux Background Video ``` ### JavaScript Import You can also import the custom element directly: ```ts import '@mux/mux-background-video/html'; // The custom element is automatically registered // You can now use in your HTML ``` ### React Component For React applications, use the React component: ```tsx import { MuxBackgroundVideo } from '@mux/mux-background-video/react'; function HeroSection() { return ( Mux Background Video ); } ``` ## Analytics To enable [Mux data](https://www.mux.com/data) collection for your background videos, include the Mux embed script in your HTML page before the Mux Background Video script: ```html ``` Once this script is included, Mux data will automatically be enabled for all background videos on the page, providing you with detailed analytics and insights about video performance. ## API Reference ### HTML Custom Element: `` The `` element automatically handles HLS streaming. #### Attributes * **`src`**: The Mux HLS stream URL (required) * **`max-resolution`**: Maximum resolution for the video (e.g., "720p", "1080p") * **`audio`**: Enable audio track (default: false) * **`preload`**: Controls video preloading behavior (default: auto) * `"none"`: No preloading * `"metadata"`: Preload only metadata * `"auto"`: Preload video data #### HTML Structure ```html Mux Background Video ``` #### JavaScript Attributes You can also set attributes programmatically: ```typescript const element = document.querySelector('mux-background-video'); // Set maximum resolution element.setAttribute('max-resolution', '1080p'); // Enable audio track element.toggleAttribute('audio', true); // Set preload behavior element.setAttribute('preload', 'metadata'); // Set the stream URL element.setAttribute('src', 'https://stream.mux.com/NEW_PLAYBACK_ID.m3u8'); // Get current values console.log(element.getAttribute('src')); console.log(element.getAttribute('max-resolution')); console.log(element.hasAttribute('audio')); console.log(element.getAttribute('preload')); ``` ### React Component: `` #### Props * **`src`**: The Mux HLS stream URL (required) * **`maxResolution`**: Maximum resolution for the video (e.g., "720p", "1080p") * **`audio`**: Enable audio track (default: false) * **`preload`**: Controls video preloading behavior (default: auto) * `"none"`: No preloading * `"metadata"`: Preload only metadata * `"auto"`: Preload video data #### Example ```tsx Mux Background Video ```