Video as Background with CSS

Video as a Header Background

A video background that takes up the entire browser window. The code for video as background GitHub is here.

Preview (Video as Background with CSS)

1. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Video as a background | @code.architects </title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="header">
        <video class="headervideo" autoplay muted loop>
            <source src="forest.mp4" type="video/mp4">
        </video>
        <div class="content">
            <p class="title">NATURE</p>
            <p class="tagline">Conservation is the key</p>
        </div>
    </header>
    <!-- Content -->
</body>
</html>

2. CSS

.header can also behave as a banner.

@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Alata', sans-serif;
}
.header {
    position: relative;
    height: 100vh;
}
.headervideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.header .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
}
.content .title {
    font-size: 80px;
    color: white;
}
.content .tagline {
    font-size: 32px;
    color: white
}

Note: Using @import allows you to import a style sheet into another style sheet.

Output

Thank you for scrolling. Share this blog, if you liked 😊. You can read our other blogs here.

Follow us on Instagram & GitHub ❤.

Show 2 Comments

2 Comments

  1. Carson Hutchins

    Very nice article. I certainly love this website. Stick with
    it!

Leave a Reply

Your email address will not be published. Required fields are marked *

three × 3 =