> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add a video background to a container

**Here is how you can add a video as a background on any project in just a few minutes.**

|    |    |    |    |    |
| --- | --- | --- | --- | --- |
| [Video tutorial](#2-video-tutorial) | [1. Upload video and thumbnail](#2-upload-video-and-thumbnail) | [2. Add video element to the container](#2-add-video-element-to-the-container) | [3. Video options](#2-video-options) | [4. Styling the video background](#2-styling-the-video-background) |

## Video tutorial

${youtube}[How to Add Background Video in HTML for your website](4KeNzCBnfV8)

For this project, you will need a downloaded video and a thumbnail image created beforehand.

## Upload video and thumbnail

Go to the **Left panel**, to the **Assets Manager** section, and upload both the video and thumbnail files.

![Upload video and thumbnail files](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-upload-video_3jlujl.gif)

## Add video element to the container

From the **Assets manager**, drag the video file to the container you want it to become a background. Make sure to drag it to the top of the container.

To replace the placeholder with the thumbnail while selecting the video, go to the Assets manager, hover above the thumbnail, and click on the **"Replace"** icon.

![Add video to the container of choice](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-add-video_8b1hfi.gif)

## Video options

Select the video and go to the Right panel and the Video section.

Enable the ** autoPlay, muted**, and **loop** properties.

![Enabling video options](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-video-options_sl2xpi.gif)

## Styling the video background

Select the video element and go to the **Right panel** to the **Size section**.

Click the dropdown icon to expand the size options and delete the current width and height.

### Change the size:

Add a Min W of 100% and a Min H of 1000px, or *however much is needed to cover the entire section*.

|| The Min H (minimum height) can have different values for other media queries to make the video more responsive.

![Editing background video size](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/4-video-size_1vmuc2k.gif)

### Change the position:

In the **Right panel**, go to the **Position section**, remove the existing values, and add *0px to the Top*.

![Editing background video position](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/5-position_f0zz4m.gif)

### Move video to background:

You need to bring the other elements to the foreground to move the video to the background.

Select the other elements in the container, go to the **Right panel**, scroll down, and click on the **Z-index** to bring them to the foreground.

This will make the video appear as the background.

If your background appears in other sections, select the container that holds the video, and in the **Right panel**, go to the **Advanced** tab and add the *overflow: hidden;* property. This will prevent your video from appearing above other sections.

![Making video show in the background using z-index](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/6-z-index_q7g7ke.gif)