Composants Lecteur vidéo Composant du lecteur vidéo

Composant du lecteur vidéo

Un composant de lecteur vidéo complexe, à contraste élevé, à l’esthétique du Material Design, adapté aux sites Web de voyage/tourisme. Dispose d’un design réactif, d’une prise en charge du mode sombre et d’éléments interactifs.

Aperçu

HTML Code

<div class="p-4 md:p-8 lg:p-12 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl overflow-hidden rounded-2xl shadow-2xl dark:shadow-none transition-all duration-300 transform bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:shadow-3xl dark:hover:shadow-none">
    <div class="md:flex">
      <!-- Video Player Section -->
      <div class="flex-1 relative aspect-video bg-black rounded-t-2xl md:rounded-tr-none md:rounded-l-2xl overflow-hidden">
        <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity duration-300">
        <div class="absolute inset-0 flex items-center justify-center">
          <button class="p-4 rounded-full bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-30 backdrop-blur-sm text-white hover:scale-110 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-600 focus:ring-opacity-50">
            <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5v14l11-7z"/>
            </svg>
          </button>
        </div>

        <!-- Controls Overlay Placeholder -->
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent opacity-90 text-white flex flex-col space-y-2">
          <div class="flex items-center space-x-2">
            <button class="text-white hover:text-blue-400 focus:outline-none">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 5v14l11-7z"/>
              </svg>
            </button>
            <div class="flex-1 h-2 bg-gray-700 rounded-full">
              <div class="h-full w-2/3 bg-blue-500 rounded-full"></div>
            </div>
            <span class="text-sm text-gray-300">0:45 / 2:30</span>
            <button class="text-white hover:text-blue-400 focus:outline-none">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            <button class="text-white hover:text-blue-400 focus:outline-none hidden sm:block">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4v16m8-8H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Details and Sidebar Section -->
      <div class="w-full md:w-2/5 p-6 md:p-8 flex flex-col justify-between">
        <div>
          <h2 class="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white mb-3 leading-tight">
            Exploring the Hidden Gems of Patagonia
          </h2>
          <p class="text-sm text-blue-600 dark:text-blue-400 font-medium mb-4 uppercase tracking-wider">
            Travel Documentary • Adventure
          </p>
          <p class="text-gray-700 dark:text-gray-300 text-base mb-6 leading-relaxed">
            Join us on an unforgettable journey through the breathtaking landscapes of Patagonia. Discover majestic glaciers, pristine lakes, and towering peaks in this stunning adventure.
          </p>
          
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Key Highlights:</h3>
            <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
              <li>Perito Moreno Glacier's stunning ice formations</li>
              <li>Trekking through Torres del Paine National Park</li>
              <li>Wildlife spotting: guanacos, condors, and pumas</li>
              <li>Kayaking in turquoise glacial waters</li>
            </ul>
          </div>
        </div>

        <div class="pt-4 border-t border-gray-200 dark:border-gray-700 mt-auto">
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Traveller User" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white">Filmed by: John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Adventure Vlogger</p>
            </div>
          </div>
          <a href="#" class="inline-block w-full py-3 px-6 rounded-lg text-center font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 shadow-lg">
            Book Your Patagonia Tour Now
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Composants associés

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 ».

Ouvrir