How to insert a background video in a HTML file?-CodePudding

What is the syntax used to insert a moving video in a HTML file while creating a website page?

I had a project of making Website for Indian Electricity as my Project for College and I applied syntax for background image but did not know syntax for video.

CodePudding user response：

I've tested the code and it works. Try this

The video will span the whole background of the div element and resize to fit the container as a result of this. The position, top, left, min-width, and min-height CSS attributes can be used to change the video's position and scale.

You may also use the controls property on the video element to add controls to the video, or use CSS to change the appearance of the controls.

.video-bg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
}

<div >
  <video src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" autoplay loop muted></video>
</div>

CodePudding user response：

<style>
  #backgroundvideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
  }
</style>

<div id="backgroundvideo">
  <video src="Video.mp4" autoplay loop muted></video>
</div>