Using video as a background

HTML and CSS only

Photo by Seth Doyle on Unsplash

So this week I’ve been playing around with landing pages and I thought it would be cool to have a video play on a loop in the background. It wasn’t very hard to figure out but there are a few css things that are important to know to have it work properly so I thought I’d share what I learned.

First let's set up our html page…

This is just boilerplate, I also already have my js and css linked here even though I won’t be using js for this part.

so now lets just add our video tag and a few others…

In our opening video tag we have it set to autoplay, it’s muted in case there was audio and we just want the video here, also it is set to loop. the video is one I got off of a website with royalty free footage just download and drag the file into your project and set it as the source. Beneath the video tags I have a header and a button.

for now the video is huge and the tags are at the bottom of the screen so let's do our css now to make the video fit the screen and center our header and button.

the video covers the page now but we can’t see our other tags any more.

What we need to do here is first our video position is set to fixed so anything else will need a position of relative.

now we can see our h1 tag to so let’s style it a little.

So we centered our text changed the font size, color and added a border and text shadow to make it more visible.

After that I decided to change the font and set all the text in the body to center.

Okay now to do the same to the button. We need to see it with position relative and then I’m gonna style it a little.

With everything done and my webpage at full screen size this is what we get…

And you can see I added a hover style to the button too, to make it glow on hover and to change the cursor to a pointer.

This is a little video of it all working…

Thanks for reading!!