Full-Screen Video Background With HTML And CSS

Full-screen video background HTML source code that is created by using custom HTML and CSS. The video background and image background header are more demanded part of web development. Because these types of snippets give a professional and attractive look to your website.

This snippet we can implement this with a simple or bootstrap carousel slider where we can run video in the background instead of images.

HTML

<div class="full-screen">
    <video src="svg-spinner-animation-with-pure-css.mp4" autoplay muted loop></video>
    <div class="content">
        <h2>What is Lorem Ipsum?</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#">Learn More</a>
    </div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
  font-family: arial;
  text-decoration: none;
  box-sizing: border-box;
}
.full-screen video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.full-screen:after {
    content: "";
    position: absolute;
    top: 0px;
    height: 100vh;
    width: 100%;
    background-color: rgb(0 0 0 / 0.4);
    z-index: -1;
}
.content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
.content h2 {
    margin: 20px 0px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.content p {
    width: 50%;
    margin: 0 auto;
    line-height: 25px;
    color: #efefef;
    letter-spacing: 1px;
}
.content a {
    display: table;
    margin: 30px auto;
    background: #ffffff;
    padding: 10px 20px;
    color: #FF5722;
    border-radius: 4px;
    text-transform: uppercase;
    transition: 0.4s linear;
}
.content a:hover{
  background: #eaeaea;
}