Material_Design_Video_Player_Component
Un composant de lecteur vidéo réactif avec une esthétique de conception matérielle, une palette de couleurs neutres chaudes, une prise en charge du mode sombre, adapté aux systèmes de réservation. Comprend une vignette vidéo, un bouton de lecture, un titre, une description et un appel à l’action « Réserver maintenant ».
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative">
<!-- Video Thumbnail & Play Button -->
<div class="relative pb-9/16 overflow-hidden group">
<img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-4 md:p-6 bg-amber-500 text-white rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50" aria-label="Play Video">
<svg class="h-8 w-8 md:h-10 md:w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
</div>
</div>
<!-- Content Area -->
<div class="p-4 sm:p-6 md:p-8">
<h3 class="text-2xl sm:text-3xl font-semibold text-gray-800 dark:text-gray-100 mb-3 leading-tight">
Exclusive Tour: Discover Our Premier Service
</h3>
<p class="text-gray-600 dark:text-gray-300 text-base sm:text-lg mb-5 leading-relaxed">
Watch this short video to get a comprehensive understanding of our top-tier service, designed to cater to your specific needs. Learn about our process, benefits, and how we ensure a seamless experience from start to finish.
</p>
<!-- Details Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6">
<div>
<div class="flex items-center text-gray-700 dark:text-gray-200 mb-2">
<svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 10.586V6z" clip-rule="evenodd"></path></svg>
<span class="font-medium">Duration:</span> 4 min 30 sec
</div>
<div class="flex items-center text-gray-700 dark:text-gray-200">
<svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2v-2a2 2 0 00-2-2H4a2 2 0 00-2 2V6z"></path><path fill-rule="evenodd" d="M4 4h12a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm4.586 7.414a2 2 0 10-2.828 2.828L10 17.828l4.243-4.242a2 2 0 10-2.828-2.828L10 12.172l-1.414-1.414z" clip-rule="evenodd"></path></svg>
<span class="font-medium">Format:</span> HD 1080p
</div>
</div>
<div>
<div class="flex items-center text-gray-700 dark:text-gray-200 mb-2">
<svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM1 18h18V8H1v10z"></path></svg>
<span class="font-medium">Presenter:</span> Alex Johnson
</div>
<div class="flex items-center text-gray-700 dark:text-gray-200">
<svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
<span class="font-medium">Relevant for:</span> All Clients
</div>
</div>
</div>
<!-- Call to Action -->
<div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700 mt-4">
<button class="px-6 py-3 bg-amber-600 text-white font-semibold rounded-md shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-300 transform hover:-translate-y-0.5" aria-label="Book a Reservation">
Book Your Reservation Now
</button>
</div>
</div>
</div>
</div>Composants associés
Lecteur vidéo
Composant de lecteur vidéo avec micro-interactions, palette de couleurs complémentaires, complexité modérée et conception réactive avec prise en charge du thème sombre pour une utilisation en portefeuille.
Lecteur vidéo monochromatique 3D
Un composant de lecteur vidéo réactif avec des éléments de conception 3D et une palette de couleurs monochromatiques, adapté à un tableau de bord.
Lecteur vidéo skeuomorphe
Composant de lecteur vidéo skeuomorphe avec effets réactifs et prise en charge du thème sombre.