Adding a fullscreen video background with a see-through overlay can make your website look modern and stylish. With Tailwind CSS, it’s easy to do. In this blog, we’ll show you how to create a fullscreen video background with a semi-transparent overlay using Tailwind CSS.
<div class="relative overflow-hidden w-full h-screen">
<video class="absolute top-0 left-0 w-full h-full object-cover" autoplay muted loop>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Your content goes here -->
<div class="absolute top-0 left-0 w-full h-full bg-opacity-50 bg-black">
<!-- Add your overlay content here -->
<h1 class="text-4xl text-center mt-20 font-bold text-white">Welcome to My Website</h1>
</div>
</div>
Tailwind CSS Full-Page Background Video with Centered Content
<div class="flex items-center justify-center h-screen overflow-hidden">
<video class="absolute z-0 w-auto min-w-full min-h-full max-w-none" autoplay muted loop>
<source src="path-to-your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="z-10 p-5 text-white bg-black bg-opacity-50 rounded">
<!-- Centered content -->
<h1 class="text-4xl font-bold">Welcome to Our Site</h1>
<p class="mt-2 text-xl">Explore our world of innovation</p>
</div>
</div>
Tailwind CSS Video Background with Card Overlay
<div class="relative bg-cover bg-center h-screen">
<!-- Video background -->
<video class="absolute inset-0 w-full h-full object-cover" autoplay loop muted>
<source src="path-to-your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Card overlay -->
<div class="absolute inset-0 flex justify-center items-center">
<div class="bg-white bg-opacity-80 p-8 rounded-lg shadow-lg max-w-md">
<h2 class="text-2xl font-bold mb-4">Discover Amazing Places</h2>
<p class="mb-4">Join us on a journey to explore the most breathtaking landscapes and cultures around the
world.
</p>
<a href="#" class="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Learn More</a>
</div>
</div>
</div>
