How to Create a Full-Screen Video Background
Building a dynamic background for your landing page is easy. I’ll prove it to you with this simple tutorial. So without further ado, let’s begin.
Create a new folder, name it whatever you’d like, and open it in a text editor. Add a new HTML file called “index.html” and a CSS folder with a file called “style.css.” Inside the HTML we want to create a scaffolding for the HTML5 file, hold shift, press 1 and hit tab — your welcome.
Copy and paste the following inside of the head tag so that we can link our external style sheet.
<link href="css/style.css" rel="stylesheet" />Also, add this to the style.css file. The asterisk is a universal selector. This can make building CSS layouts easier and a lot more intuitive.
* {box-sizing: border-box;margin: 0;padding: 0;}
I’m using the extension “live server” from vscode. It can help speed up your static or dynamic web page development with a live reload feature. If you are interested, go ahead and install it here. Now, right-click the HTML file and select “Open with live server.” You should see a blank page because we have nothing inside our body tag.
When building the user interface of a website, it is crucial to understand the concept of the box model. I won’t get into it in-depth, but it is essentially what makes up the layout of a web page. In an HTML file, every tag is a rectangular box. Learning how to visualize the contents on a web page inside of “boxes” can be useful in development.
Take a look at our example, and you’ll notice that the background takes up the full screen, so what you would typically do is have one div tag and stretch that div the entire screen. So inside our index.html file, within our body tag, let’s create a new div and give it an id of hero. Then inside style.css, let’s style this id and start by giving it a height of 100vh and the width of 100vw. What this will do is stretch the div tag, with the id of hero, the full length of the browser.
Now what we want to do is add a video tag inside of that div tag that we stretched to fit the screen. There are a couple of settings we want to add to this video so that it starts automatically when someone visits the website. The loop means that it’s going to loop the video and keep replaying every time it finishes. We also need to make it muted, otherwise, some devices won’t play the video automatically. And last but not least, we add autoplay so that the video plays straight away.
Did anything break? No? Awesome!
At this moment, head over to your browser and go to pexels.com. This website gives you free stock videos. Go ahead and choose whichever video you’d like to use. Once you’ve decided, select HD and click free download. Then drag the video file into your project and add it to the src attribute inside the source tag.
If you check your browser, you’ll see that the video has appeared, but it is not doing exactly what we wanted. So, we need to go back and create a new line in style.css, which will target the video. We’ll add a width and height of 100% and a position of absolute so that it’s not relative to the container. This will allow it to stretch however large it can go within an area. Then add a positioning property of top and left with a value of 0. This sets the margin edge of a positioned box. Also, let us include a z-index of -1 because this dictates the stack order of elements, and we want our content to show on the web page. Oh! And one more thing, we want a property of object-fit with a value of cover.
We can now add the text on top of this video, so let’s go back to index.html, and underneath the video tag, let’s create a div with the caption of your choice. Take a look at your browser, and you’ll see that the text is at the top left corner of your web page, but we want to center it on our screen. Here is where we want to use flexbox. So inside the selector with the id of hero, add the following:
display: flex;justify-content: center;align-items: center;
I also won’t go into depth about the ins-and-outs of flexbox, but I recommend that you look into it if you want to level up your CSS skills.
Now for the finishing touch! Go to googlefonts.com and select the style you like, then embed the link inside the head of the HTML file. Add the font-family, size and whatever color you want, and your all set!
If you were having trouble it's ok! Use this as a reference.
