Hey fellow creators,
Here’s a simple tutorial on how to add a video background to your website ! You’ll learn all the tips and tricks to make it responsive.
If you prefer to watch the video version, it’s right here :
Tóm Tắt
1. The basic structure of your code.
Let’s imagine a restaurant asked us to create a nice website. Create a HTML file, with only the head for now. You can add a font that you like or use the one I found:
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
/>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<title>
Video Background</title>
<link
rel=
"stylesheet"
href=
"style.css"
/>
<link
rel=
"preconnect"
href=
"https://fonts.googleapis.com"
/>
<link
rel=
"preconnect"
href=
"https://fonts.gstatic.com"
crossorigin
/>
<link
href=
"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Roboto&display=swap"
rel=
"stylesheet"
/>
</head>
</html>
Enter fullscreen mode
Exit fullscreen mode
Create a CSS file, in which you’ll simply reset the values and add the font for now:
*,
::before
,
::after
{
box-sizing
:
border-box
;
margin
:
0
;
padding
:
0
;
}
body
{
font-family
:
Playfair
Display
,
sans-serif
;
background
:
#f1f1f1
;
}
Enter fullscreen mode
Exit fullscreen mode
2. Add the video to your HTML!
Now you need to create a body, inside of which will be the video tag, which will ask for a source which you can add as a tag, however you need to add some attributes like autoplay (it’ll play the video automatically), muted (to mute the sound of the video if it has one) and loop(it’ll repeat the video infinitely):
<body>
<div
class=
"home"
>
<video
autoplay
muted
loop
>
<source
src=
"ressources/cooking.mp4"
type=
"video/mp4"
/>
</video>
</div>
</body>
Enter fullscreen mode
Exit fullscreen mode
You’ll need to add the video in your ressources folder, which is what I did.
As you can see, it works! However, there are scroll bars on the side and bottom of the screen and the video is too light, so that if you add text on top of it, the text will be hard to read. Let’s change all of that!
3. Add an overlay with some text.
Let’s add an overlay beneath the video that will have some text in order to showcase the restaurant:
<div
class=
"overlay"
></div>
<div
class=
"home-content"
>
<h1>
High-End Kitchen.</h1>
<div
class=
"middle-line"
></div>
<button>
DISCOVER</button>
</div>
Enter fullscreen mode
Exit fullscreen mode
4. Let’s style the page!
Go to your CSS file and start by creating a container with a height of 100vh (in order to take up the whole screen) and position relative, since some elements (children of this container) will be absolute.
.home
{
height
:
100vh
;
position
:
relative
;
}
Enter fullscreen mode
Exit fullscreen mode
Now let’s deal with the video:
video
{
object-fit
:
cover
;
position
:
absolute
;
width
:
100%
;
height
:
100%
;
position
:
absolute
;
z-index
:
1
;
}
Enter fullscreen mode
Exit fullscreen mode
It’s now taking the full width and height of the viewport, meaning that you no longer have scroll bars on the side and bottom of the page!
Now let’s darken the video with the overlay:
.overlay
{
position
:
absolute
;
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
z-index
:
2
;
background
:
rgba
(
0
,
0
,
0
,
0.6
);
}
Enter fullscreen mode
Exit fullscreen mode
As you can see, you can either use:
width
:
100
%;
height
:
100
%;
Enter fullscreen mode
Exit fullscreen mode
or
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
Enter fullscreen mode
Exit fullscreen mode
It does the exact same thing, since it pins your element to all corners of the screen! This is just a little trick for you to know.
Now let’s style the content by increasing the size of the title and the button, organising it to the middle of the screen and creating the divide vertical line between the title and the button:
.home-content
{
width
:
600px
;
margin
:
0
auto
;
position
:
relative
;
top
:
150px
;
color
:
#fff
;
z-index
:
3
;
}
.home-content
h1
{
font-family
:
Playfair
Display
,
serif
;
text-align
:
center
;
text-transform
:
uppercase
;
font-size
:
85px
;
line-height
:
1.1
;
}
.middle-line
{
height
:
200px
;
width
:
2px
;
background
:
#fff
;
margin
:
40px
auto
;
}
.home-content
button
{
display
:
block
;
font-size
:
20px
;
border
:
1px
solid
#f1f1f1
;
border-radius
:
5px
;
background
:
transparent
;
color
:
#fff
;
margin
:
50px
auto
0
;
padding
:
16px
30px
;
cursor
:
pointer
;
}
Enter fullscreen mode
Exit fullscreen mode
You now have a beautiful landing page for your website with a nice high-resolution video background!
Check out the source code here.
Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool
Happy coding!
Enzo.
