Skip to content
Related Articles
Open in App
Not now

Related Articles

How to add Full Screen Background Video using Tailwind CSS ?

Improve Article
Save Article
  • Last Updated : 23 Nov, 2022
Improve Article
Save Article

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=
    </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=
            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=
    </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=
           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=
                type="video/mp4"/>
        </video>
    </header>
</body>
</html>


Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!