Add video as background in webpage?

Question

I want to add video as background. How can I do that using only HTML and CSS?

Answer 1

Is it a long video or short? If short you could transform it to a gif

Answer 2

I would like to know this too!

Answer 3

If you are using HTML5 they added <video> command which allows you to insert a video in your website.

Example :
<video playsinline autoplay muted loop poster="example.jpg" id="exampleID">
/* ONLY ONE OF THESE 2 IS NEEDED
<source src="example.webm" type="video/webm">
<source src="example.mp4" type="video/mp4">
*/
</video>

Than you can style it with CSS :

video#example {
position: fixed;
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: url(example.jpg) no-repeat;
background-size: cover;
}

CSS is for placing it in the back and controlling some of its features.