how to add background video in tailwind css

Create a fullscreen video background with a semi-transparent overlay for incorporating content into a webpage 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="https://cdn.pixabay.com/vimeo/874643413/book-185096.mp4?width=640&hash=1fc2abd656ab19e5263588af5a0e2144ede4b1e0"
      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>
background video in tailwind css

background video in tailwind css

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="https://cdn.pixabay.com/vimeo/874643413/book-185096.mp4?width=640&hash=1fc2abd656ab19e5263588af5a0e2144ede4b1e0"
      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>
tailwind background video with card

tailwind background video with card


Tags: