Composants Lecteur vidéo Composant du lecteur vidéo

Composant du lecteur vidéo

Composant de lecteur vidéo de conception matérielle avec mode sombre

Aperçu

HTML Code

<div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="relative pb-9/16">
      <iframe class="absolute w-full h-full" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="p-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Video Title</h3>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="text-gray-900 leading-none dark:text-white">Author Name</p>
          <p class="text-gray-600 dark:text-gray-400">Posted on October 26, 2023</p>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="flex space-x-4">
          <button class="text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H12v-7H4v-7H3a2 2 0 01-2-2V5a2 2 0 012-2h1a2 2 0 012 2v2h0a2 2 0 002 2v1h2a2 2 0 002-2zm0 0v6m0-6a2 2 0 100-4 2 2 0 000 4z"></path></svg>
          </button>
          <button class="text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-400">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.618 2H12v7h8v7h1a2 2 0 012 2v1a2 2 0 01-2 2h-1a2 2 0 01-2-2v-2h0a2 2 0 00-2-2v-1h-2a2 2 0 00-2 2zm0 0v6m0-6a2 2 0 100-4 2 2 0 000 4z"></path></svg>
          </button>
        </div>
        <button class="text-gray-500 hover:text-green-500 dark:text-gray-400 dark:hover:text-green-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h9.634c.399 0 .701.232.8.519l7.273 17.209c.1.287-.08.609-.407.609H18.54l-5.007-12.623z"></path></svg>
        </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.

Ouvrir

Composant du lecteur vidéo

Un lecteur vidéo de style Glassmorphism avec des éléments translucides semblables à du verre givré, une palette de couleurs pastel et une interface complexe adaptée aux sites Web d’entreprise. Il prend en charge le responsive design et un thème sombre utilisant Tailwind CSS, sans JavaScript.

Ouvrir

Composant de lecteur vidéo arc-en-ciel dégradé

Un composant de lecteur vidéo épuré et minimaliste pour les tableaux de bord, doté d’un schéma de couleurs arc-en-ciel dégradé, d’un design réactif et d’une prise en charge du mode sombre, incarnant le style typographique suisse/international.

Ouvrir