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)


<!DOCTYPE html>
<html lang="en">
    <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">
    <header class="header">
        <video class="headervideo" autoplay muted loop>
            <source src="forest.mp4" type="video/mp4">
        <div class="content">
            <p class="title">NATURE</p>
            <p class="tagline">Conservation is the key</p>
    <!-- Content -->

2. CSS

.header can also behave as a banner.

@import url('');
* {
    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.


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


  1. Carson Hutchins

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

Leave a Reply

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

three × 3 =