Fullscreen Video in Background

Reference: Full Cover Background Image

Welcome to another lesson of iLoveCoding. In this lesson, you will learn how to set a Full-Screen Background Video on your website. Previously we have created a similar effect on our site but with a static image. Look at the reference above for a recap.

Quick Recap:
We'll be reusing the code that we wrote in our previous lesson. Make sure you go through that lesson so you don't get confused.

We cannot put a video in CSS, so we have to put a video tag in HTML document. We are going to put our video tag under <div class ="container-main">. I'll also set autoplay and loop to true like such

<video autoplay="true" loop="true">
 <source src="videosample.mp4">
</video>

Save it, refresh the screen and you will see that the video is playing

The next thing we're going to do is to cover the entire area, and that's going to happen via CSS. I'm going to put a style by writing such

video {
 min-width:  100%;
 min-height: 100%;
 background-size: cover;
}

Now if I scroll the page, you will notice that the video is covering the entire 100% of the screen as shown below

The next thing we want to do is to put the text on the top of the video layer. I'm going to set the position to absolute and z-index to -100 like such

video {
 min-width:  100%;
 min-height: 100%;
 background-size: cover;
 position: absolute;
 z-index: -100; 
}

Immediately the text got appeared in the middle as you can see below.

You can also add a YouTube video as well but it's not going to be as perfect as importing a video. For for this example, go to any YouTube video and select embed, copy and paste the iFrame code like such

and change the video from iFrame like such:

iFrame {
 min-width:  100%;
 min-height: 100%;
 background-size: cover;
 position: absolute;
 z-index: -100; 
}

shows the video but it doesn't load