# Use videos in your website design Learn the easiest way to add background and hero videos to your website. # Use videos in your website design Video has a wide range of uses, but when you're building a marketing page there are two very common choices: Background videos and Hero videos. This guide covers the best way to add both types of video to your website. ## Two types of video ### What are background videos?

``` The `` element inside acts as a poster image while the video loads. #### React Component For React applications, install the package: ```bash npm install @mux/mux-background-video ``` ```tsx import { MuxBackgroundVideo } from '@mux/mux-background-video/react'; function BackgroundVideoSection() { return (

); } ``` ### 2. Upload Your Video and Replace the Playback ID To use your own video: 1. Go to **Assets** in the Mux Dashboard and click **Upload** 2. Select your video file 3. For video quality, select **Basic** (recommended for background videos) 4. Click **Upload** Once the upload is complete, copy your **Playback ID** from the asset details page and replace the sample playback ID in your code. Mux Background Video requires [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. ### 3. Set Maximum Resolution Limit the resolution to match your layout and save bandwidth: ```html

``` For React: ```tsx

``` ### 4. Pause When Not Visible (Optional) Background videos continue playing even when users switch to another browser tab. To save CPU and battery, you can pause the video when the page is hidden: ```js document.addEventListener('visibilitychange', () => { const video = document.querySelector('mux-background-video video'); if (document.hidden) { video.pause(); } else { video.play(); } }); ``` For complete API documentation and advanced options, see the [Mux Background Video guide](/docs/guides/mux-background-video). *** ## Alternative: Static MP4 Files You can also serve background videos as static MP4 files instead of using HLS streaming. Each approach has its own strengths. **Why choose MP4:** * No JavaScript required—just a `