Composants Lecteur vidéo Composant du lecteur vidéo

Composant du lecteur vidéo

Un composant de lecteur vidéo réactif conçu avec une esthétique inspirée du papier/de l’impression et une palette de couleurs complémentaire, adapté aux forums ou aux plates-formes communautaires. Inclut la prise en charge du mode sombre et du HTML sémantique.

Aperçu

HTML Code

<div class="font-sans antialiased bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-850 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 relative">
    <!-- Faux paper texture / watermark -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/notebook-dark.png')] opacity-10 dark:opacity-5 pointer-events-none z-0"></div>

    <div class="relative z-10 p-4 sm:p-6 lg:p-8">
      <!-- Header -->
      <div class="flex justify-between items-start mb-6 border-b pb-4 border-amber-200 dark:border-violet-600">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-amber-700 dark:text-amber-300 leading-tight">Community Highlight: 'The Future of AI'</h2>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1">Dive into cutting-edge discussions.</p>
        </div>
        <div class="flex-shrink-0">
          <a href="#" class="text-violet-600 dark:text-violet-400 hover:underline text-sm sm:text-base">View Thread</a>
        </div>
      </div>

      <!-- Video Player Area -->
      <div class="relative w-full aspect-video bg-black rounded-lg overflow-hidden shadow-md mb-6 border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/800/450?random=1" alt="Video Thumbnail" class="w-full h-full object-cover" />
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
          <button class="p-4 sm:p-5 rounded-full bg-amber-500 text-white shadow-xl hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:bg-violet-700 dark:hover:bg-violet-800 dark:focus:ring-violet-500 transition-all duration-300 ease-in-out transform hover:scale-105">
            <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5v14l11-7z"></path>
            </svg>
            <span class="sr-only">Play Video</span>
          </button>
        </div>
      </div>

      <!-- Video Details and Actions -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="md:col-span-2">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-700 dark:text-amber-300 leading-snug mb-2">Unlocking the Potential of Generative AI</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
            Join leading experts as they explore the groundbreaking advancements and ethical considerations of generative artificial intelligence.
            This session delves into practical applications and future implications.
          </p>
        </div>
        <div class="md:col-span-1 flex flex-col items-start md:items-end">
          <div class="flex items-center text-sm mb-2 text-gray-600 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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 9.586V6z" clip-rule="evenodd"></path></svg>
            <span>Posted: <time datetime="2023-10-26">Oct 26, 2023</time></span>
          </div>
          <div class="flex items-center text-sm mb-4 text-gray-600 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-violet-600 dark:text-violet-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 4v-4H4a2 2 0 01-2-2V5zm10 4a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 100-2 1 1 0 000 2zm-5 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
            <span>Views: 1.2K</span>
          </div>
          <div class="flex space-x-2">
            <button class="flex items-center px-3 py-2 rounded-full text-white bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-800 text-sm transition-colors duration-200">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 01-2 2H4a2 2 0 01-2-2V8c0-1.1.9-2 2-2h4l2-2h6a2 2 0 012 2v3zM7 6a1 1 0 01-2 0V4a1 1 0 012 0h2a1 1 0 010 2H7z"></path></svg>
              Share
            </button>
            <button class="flex items-center px-3 py-2 rounded-full text-violet-700 bg-violet-100 hover:bg-violet-200 dark:bg-violet-900 dark:text-violet-300 dark:hover:bg-violet-800 text-sm transition-colors duration-200">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 11-3 0v-6zM6 10.333v5.5H18V4.467a2 2 0 00-2-2H8a2 2 0 00-2 2v5.866zM10 6a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zm0 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zm-4 4a1 1 0 011-1h2a1 1 0 110 2H7a1 1 0 01-1-1z"></path></svg>
              Add to Watchlist
            </button>
          </div>
        </div>
      </div>

      <!-- Uploader Info -->
      <div class="flex items-center p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full mr-4 object-cover border-2 border-amber-400 dark:border-violet-500" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Uploader Avatar">
        <div>
          <p class="font-medium text-amber-800 dark:text-amber-200">Uploaded by: <a href="#" class="hover:underline text-amber-700 dark:text-amber-300">TechExplorer</a></p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Senior Member, AI Innovations Forum</p>
        </div>
      </div>
    </div>
  </div>
</div>

Composants associés

Lecteur vidéo minimaliste

Composant de lecteur vidéo codé en HTML avec Tailwind CSS. Il a un design minimaliste utilisant une palette de couleurs en niveaux de gris, destiné à une utilisation sur le tableau de bord. Il s’agit d’un composant complexe avec plusieurs éléments interactifs et est entièrement réactif avec la prise en charge du mode sombre.

Ouvrir