Create Fullscreen Video Background with HTML and CSS

Last Updated : 27 Dec, 2023

This article will show you how to add Full-screen background video with the help of HTML and CSS. Creating a fullscreen video background with HTML and CSS can add a dynamic and engaging element to your web page. To add the background video, we use HTML video tag.

HTML video tag is used to add video, and CSS styles add its position and other styling elements.

Example 1: We will add a full-screen background video.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Create Fullscreen Video 
        Background with HTML and CSS?
    </title>
     
    <style>
        .video-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
 
        video {
            position: absolute;
            z-index: 10;
            width: 100%;
            height: 100vh;
            max-width: none;
        }
    </style>
</head>
 
<body>
    <div class="video-container">
        <video src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221105184949/ezgif.com-gif-maker.mp4"
            autoplay loop muted>
        </video>
    </div>
</body>
 
</html>

Output:

video-background

Example 2: In this example, we will add full screen background video, and add some text and play/pause button over video.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <title>
        How to Create Fullscreen Video 
        Background with HTML and CSS?
    </title>
     
    <style>
        body {
            margin: 0;
            padding: 0;
        }
 
        .video-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
 
        video {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100vh;
            max-width: none;
        }
 
        .overlay-content {
            background-color: rgb(40, 224, 40);
            opacity: 0.5;
            position: absolute;
            z-index: 2;
            bottom: 0;
            text-align: center;
            width: 100%;
            padding: 20px;
        }
 
        button {
            padding: 10px 20px;
            border-radius: 10px;
            background-color: rgb(7, 66, 7);
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div class="video-container">
        <video id="backgroundVideo"
            autoplay loop muted>
            <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221105184949/ezgif.com-gif-maker.mp4"
                type="video/mp4">
        </video>
 
        <div class="overlay-content">
            <h1>GeeksforGeeks</h1>
            <p>A computer science portal for geeks</p>
            <button id="toggleButton" onclick="toggleVideo()">
                Pause/Play
            </button>
        </div>
    </div>
 
    <script>
        let video = document.getElementById("backgroundVideo");
 
        function toggleVideo() {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }
    </script>
</body>
 
</html>