How to make a full screen video background in html css?
- MultiWebPress
- November 9, 2021
- No Comments
Hello Friends, Today in this blog you’ll learn how to make a full screen video background in html css. Recently, I have shared a poll system in HTM & CSS. Now it’s time to create a how to make a full screen video background in html + css.
Video tutorial (fullscreen video in html CSS)
You may also like:
- How to create poll system in html css?
- Pricing Card in html & css?
- How to create floating social media icons?
- Responsive Navigation bar | Header in Html, CSS & Javascript?
- Typing Text Animation CSS | Typewriter text effect CSS | Pure HTML & CSS
- How to create 3D CSS button? | Html & CSS
- CSS Stroke Animation | Animated Text Background With CSS Stroke | Pure Html & CSS
In the video, you’ve seen a video playing in the background auto with loop.There are many different ways to create this responsive fullscreen video background using html css,make a full screen video background html, one of which is the way we have designed it.
If you like this full screen video background in html css (Pricing Tables)and want to use it in your project you can freely copy & use it without any restriction, And you can take Pricing Tables to the next level with your creativity.
How to make a full screen video background in html css [Source Codes]
So to create these ,full-screen video background you need to create two different files. The 2 files are index.html & style.css files. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file.
Let’s create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your CSS file. Remember you’ve to create a file with a .css extension
CSS CODE
*{
margin: 0;
padding: 0;
font-family: "Open Sans";
text-decoration: none;
}
.full-screen{
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;background: linear-gradient(0deg, rgba(68,68,68,0.5270483193277311) 0%, rgba(0,0,0,0.4962359943977591) 100%);
}
.full-screen video{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.content h1 {
text-align: center;
font-size: 7vw;
color:#fff;
}
h1.aj_bg {
background: linear-gradient(
0deg, rgba(20,249,250,0.38139005602240894) 0%, rgba(255,237,70,0.4962359943977591) 100%);
}
Now create a (HTML) file with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension
HTML CODE
<!DOCTYPE html>
<!-- Created By MultiWebPress - www.multiwebpress.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="full-screen">
<video src="video.mp4" autoplay muted loop></video>
<div class="content">
<h1>FULLSCREEN </h1>
<h1 class="aj_bg">VIDEO BACKGROUND</h1>
</div>
</div>
</body>
</html>
After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)
That’s all, now you’ve successfully created full screen video background in html css. If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.
Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.
Thanks in Advance!
SHARE
Categories
- Recommended Posts (17)
- HTML & CSS (15)
- WordPress (10)
- CSS Buttons (3)
- Navigation Bar (2)
- Social Media Buttons (2)
- Templates (2)
- Footer (1)