How to add Full Screen Background Video using Tailwind CSS ?
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:
Please Login to comment...