Video backgrounds can make an interesting and visual way to give your pages a dynamic feeling. Although you want to use them carefully and with videos that won't distract from your foreground content, we encourage the use of video backgrounds when appropriate.

Start by deciding what element in your code will have a video background. Assign it the CSS class video-container then add the following to your main stylesheet:

.video-container {
    position: relative;
}

Next, place your video within the chosen element by using the following code:

<video autoplay muted loop>
  <source src="https://<Path to your video>" type="video/mp4" />
</video>

Replace <path to your video> with the actual URL of your video. Make sure that your video is an MP4 video and that the HTTPS address is accessible. Finally, add the following code to your main stylesheet:

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

That's all there is to it. A simple and fast way to add videos to any element within your website template.