Video In Background with HTML & CSS | Project Series Day - 8 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made a To-Do List with the help of HTML, CSS, and Javascript | It is Project Series Day 7. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this simple video background step by step.
Video Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
<section class="showcase">
<div class="video-container">
<video src="https://player.vimeo.com/external/519489060.sd.mp4?s=168f09a5ed618564b4e920ce49e3c46061253201&profile_id=139&oauth2_token_id=57447761" autoplay muted loop></video>
</div>
<div class="content">
<h1>Video Background</h1>
</div>
</section>
So that was the HTML coding. Now we will code CSS
CSS 🎈( step - 2)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: arial;
}
h1 {
font-weight: 300;
font-size: 60px;
line-height: 1.2;
margin-bottom: 15px;
}
.showcase {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 0 20px;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.video-container:after {
content: '';
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
position: absolute;
}
.content {
z-index: 2;
}
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.
More blogs you should give a check!