How to add Full Screen Background Video using Tailwind CSS ?

Last Updated : 23 Nov, 2022

Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.

In this article, we will see how to add a full-screen background video in Tailwind CSS. Using some tailwind classes, we can make a full-screen video background that covers the entire browser screen.

Tailwind Classes:

relative: It sets the header element relative and makes the video absolute to position it.
flex: It adds a display flex so we can align the text block inside.
items-center: It aligns the text block vertically.
justify-center: It aligns the text block horizontally.
h-screen: It adds a 100vh height, so the video is scaled to 100% of the viewport height.
mb-12: It adds a big margin-bottom with this (3rem).
overflow-hidden: It makes the video bigger than the header so we do not want to show the overflow.
absolute: It makes the video absolute positioned element.
z-10: It gives the video a lower z-index than our text block to keep it in the background.
w-auto: The width can be “auto” so that it will adjust accordingly.
min-w-full: It makes the min-width 100%.
min-h-full: It makes the min-height 100%.
max-w-none: It unsets the default max-width.

Steps for adding full-screen background video in HTML.

Step 1: Add the Tailwind CSS CDN link in the head section of the code using the script tag.

<script src=”https://cdn.tailwindcss.com”></script>

Step 2: Add the <video> tag.

<video src=

“https://media.geeksforgeeks.org/wp-content/uploads/20221105184949/ezgif.com-gif-maker.mp4”>

</video>

Step 3: Define classes to add video in the full-screen background.

<video src=

“https://media.geeksforgeeks.org/wp-content/uploads/20221105184949/ezgif.com-gif-maker.mp4”

className=”absolute z-10 w-auto min-w-full min-h-full max-w-none”></video>

Example 1: Below example demonstrates how to add a full-screen background video using Tailwind CSS.

In the given example, we have used an <video> element to add a video source in the background and the video is set to full screen using the tailwind CSS classes as explained above.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>GeeksforGeeks</title> 
    <script src= 
"https://cdn.tailwindcss.com"> 
    </script> 
</head> 
<body class="bg-black"> 
    <div style="text-align: center"> 
        <h1 class="text-green-600  
                text-3xl font-bold"> 
            GeeksforGeeks 
        </h1> 
        <h3 class="text-xl text-white"> 
            Full Screen Background Video in Tailwind CSS 
        </h3> 
    </div> 
    <div class="relative flex items-center  
        justify-center h-screen overflow-hidden"> 
        <video src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20221105184949/ezgif.com-gif-maker.mp4"
            autoplay="{true}" loop muted 
            className="absolute z-10 w-auto  
            min-w-full min-h-full max-w-none"> 
        </video> 
    </div> 
</body> 
</html> 

Output:

Example 2: Below example demonstrates a full-screen background video having a button on its top using Tailwind CSS.

In the given example, we have used an HTML header tag and also have an HTML <div> that will hold a block so that it sits on top of the video. Along with this, a <video> tag is used to hold a video or multiple sources.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>GeeksforGeeks</title> 
    <script src= 
"https://cdn.tailwindcss.com"> 
    </script> 
</head> 
<body class="bg-black"> 
    <div style="text-align:center"> 
        <h1 class="text-green-600 text-3xl  
            font-bold"> 
            GeeksforGeeks 
        </h1> 
        <h3 class="text-xl text-white"> 
            Full Screen Background Video in Tailwind CSS 
        </h3> 
    </div> 
    <header class="relative flex items-center  
            justify-center h-screen mb-12  
            overflow-hidden"> 
        <a href= 
"https://geeksforgeeks.org"
           class="relative z-30 p-5 text-2xl  
           text-white bg-green-400 bg-opacity-50 
           rounded-xl"> 
           GeeksforGeeks 
        </a> 
        <video autoplay loop muted 
            class="absolute z-10 w-auto  
            min-w-full min-h-full max-w-none"> 
            <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20221105184949/ezgif.com-gif-maker.mp4"
                type="video/mp4"/> 
        </video> 
    </header> 
</body> 
</html> 