Cette section de héros a un fort impact visuel avec une vidéo en boucle placée en arrière-plan. En diffusant une vidéo d’image de marque ou une vidéo de démonstration de produit en arrière-plan, vous pouvez fortement attirer l’attention des utilisateurs.

Aperçu

Cas d’utilisation et fonctionnalités

• Page de destination du produit : transmettez la valeur de manière intuitive en montrant le produit réel en action en arrière-plan.
• Site Web d’entreprise : créez une impression professionnelle avec des images cinématiques qui transmettent l’atmosphère de votre marque.
• Page d’annonce d’événement : transmettez l’enthousiasme et l’enthousiasme des événements passés et augmentez la motivation à participer.
• Caractéristiques :
  • En utilisant object-cover, la vidéo est réactive afin qu’elle couvre tout l’arrière-plan quelle que soit la taille de l’écran.
  • Une superposition noire translucide (bg-black/50) est placée sur la vidéo pour assurer la visibilité du texte.
  • En spécifiant l’attribut « playsinline », le jeu sera joué en ligne en arrière-plan au lieu d’une lecture en plein écran, même sur les appareils iOS.

Points clés du design et de l’UX (Design & UX)

• Assurer le contraste : La luminosité des vidéos changeant, il est important d’ajuster l’opacité de la superposition pour que le texte soit toujours lisible.
• Considération de la vitesse de chargement : les fichiers vidéo ont tendance à être lourds. Nous vous recommandons de préparer un fichier MP4 de plus petite capacité (de préférence d’utiliser également WebM) et de définir également une image d’affiche (attribut poster).
• Animations : ajoutez des animations en fondu aux éléments de contenu pour offrir une expérience riche lors du chargement de la page.

Comment personnaliser (Guide de personnalisation)

• Modifier la densité de superposition : régler bg-black/50 de <div class="absolute inset-0 z-10 bg-black/50"></div> sur bg-black/70 le rendra plus sombre, et régler bg-black/30 le rendra plus lumineux.
• Colorez la superposition : Vous pouvez également colorer la superposition pour qu’elle corresponde à la couleur de votre marque, comme bg-blue-900/60.
• Ajuster la hauteur : Vous pouvez contrôler la hauteur de la section en changeant h-[600px] en h-screen (plein écran), ou min-h-[80vh], etc.

code d’implémentation (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; }
-->

Prise en charge du navigateur

• Fonctionne bien avec les dernières versions des navigateurs modernes (Chrome, Firefox, Safari, Edge).
• En ajoutant l’attribut playsinline, il sera automatiquement joué en ligne sur la version iOS de Safari.
• La lecture automatique peut être bloquée si le « Mode faible consommation » d’iOS est activé ou si l’environnement de communication est médiocre. Par conséquent, assurez-vous de définir une image alternative dans l’attribut poster.