This hero section has a strong visual impact with a looping video placed throughout the background. By playing a brand image video or product demo video in the background, you can strongly attract users’ attention.

Preview

Discover the New Digital Experience

Take your business to the next stage with the latest technology and sophisticated design. Let’s create the future together.

Get Started

Watch Demo

Use Cases & Features

Product Landing Page: Convey value intuitively by showing the actual product in action in the background.
Corporate website: Create a professional impression with cinematic images that convey the atmosphere of your brand.
Event announcement page: Convey the excitement and excitement of past events and increase motivation to participate.
Features:
- By using object-cover, the video is responsive so that it covers the entire background regardless of the screen size.
- A translucent black overlay (bg-black/50) is placed over the video to ensure text visibility.
- By specifying the playsinline attribute, the game will be played inline as a background instead of full screen playback even on iOS devices.

Key points of design and UX (Design & UX)

Ensuring Contrast: Since the brightness of videos changes, it is important to adjust the opacity of the overlay so that the text is always readable.
Consideration for loading speed: Video files tend to be heavy. We recommend that you prepare an MP4 file with a smaller capacity (preferably also use WebM) and also set a poster image (poster attribute).
Animations: Add fade-in-up animations to content elements to provide a rich experience on page load.

How to customize (Customization Guide)

Change the overlay density: Setting bg-black/50 of <div class="absolute inset-0 z-10 bg-black/50"></div> to bg-black/70 will make it darker, and setting bg-black/30 will make it brighter.
Color the overlay: You can also make the overlay colored to match your brand color, like bg-blue-900/60.
Adjust height: You can control the height of the section by changing h-[600px] to h-screen (full screen), or min-h-[80vh], etc.

implementation code (Implementation)

<section class="relative h-screen min-h-[600px] w-full flex items-center justify-center overflow-hidden font-sans">

<!-- Video background -->
<video
  autoplay
  loop
  muted
  playsinline
  poster="/assets/video-poster.jpg"
  class="absolute z-0 w-auto min-w-full min-h-full max-w-none object-cover"
>
  <source src="/assets/hero-background.mp4" type="video/mp4" />
  <source src="/assets/hero-background.webm" type="video/webm" />
  Your browser does not support the video tag.
</video>

<!-- Overlay (dark layer to improve visibility) -->
<div class="absolute inset-0 z-10 bg-black/60"></div>

<!-- Content -->
<div class="relative z-20 max-w-4xl mx-auto px-6 text-center text-white">
  <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight leading-tight mb-6 animate-fade-in-up">
    Discover the New <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">Digital Experience</span>
  </h1>
  <p class="text-lg sm:text-xl md:text-2xl text-gray-200 mb-10 max-w-2xl mx-auto opacity-0 animate-fade-in-up animation-delay-200">
    Take your business to the next stage with the latest technology and sophisticated design. Let's create the future together.
  </p>
  <div class="flex flex-col sm:flex-row items-center justify-center gap-4 opacity-0 animate-fade-in-up animation-delay-400">
    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors duration-300 shadow-lg hover:shadow-xl text-lg">
      Get Started
    </a>
    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white/10 backdrop-blur-md text-white border border-white/30 font-bold rounded-full hover:bg-white/20 transition-colors duration-300 text-lg flex items-center justify-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      Watch Demo
    </a>
  </div>
</div>
</section>

<!-- 
* When using Tailwind CSS, you need to add an animation class for fade-in-up to 
tailwind.config.js or define it in your custom CSS.

CSS Example:
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out forwards;
}
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
-->

Browser Support

Works well with the latest versions of modern browsers (Chrome, Firefox, Safari, Edge).
By adding the playsinline attribute, it will be automatically played inline on the iOS version of Safari.
Autoplay may be blocked if iOS’s “Low Power Mode” is turned on or if the communication environment is poor. Therefore, be sure to set an alternative image in the poster attribute.