CCHub Logo CCHub Tailwind Collection
Composants Lecteur vidéo Composant du lecteur vidéo

Composant du lecteur vidéo

Composant de lecteur vidéo avec style Glassmorphism, schéma de couleurs analogue et complexité modérée à des fins de blog/contenu, avec une conception réactive et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de Javascript.

Aperçu

HTML Code 

<div class="dark:bg-gray-900 dark:text-white py-12">
  <div class="container mx-auto px-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden lg:flex lg:max-w-6xl mx-auto">
      <div class="lg:w-1/2">
        <div class="relative" style="padding-top: 56.25%;">
          <iframe class="absolute top-0 left-0 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-screen" allowfullscreen></iframe>
        </div>
      </div>
      <div class="lg:w-1/2 p-8">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="mt-4 flex items-center">
          <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 dark:text-white leading-none">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on May 15, 2023</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Example of Glassmorphism effect on a separate element -->
    <div class="mt-12 max-w-4xl mx-auto backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-700 rounded-lg p-6">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Glassmorphism Effect Example</h3>
      <p class="text-gray-700 dark:text-gray-200">This is an example of a frosted glass-like element with a blur effect, demonstrating the Glassmorphism style.</p>
    </div>

  </div>
</div>

Composants associés

Composant de lecteur vidéo immobilier

Un composant de lecteur vidéo complexe et réactif pour les plateformes immobilières, doté d’une esthétique Material Design avec une palette de couleurs forêt/vert. Comprend le contrôle vidéo, les détails de la propriété et une liste de lecture, avec une prise en charge complète du mode sombre.

Ouvrir

Composant du lecteur vidéo

Un composant de lecteur vidéo complexe et réactif pour le commerce électronique, avec des couleurs triadiques et un design axé sur la micro-interaction. Comprend les commandes de lecture, le volume, la barre de progression, le plein écran, les paramètres et une superposition de produit, avec une prise en charge complète du mode sombre.

Ouvrir

Composant du lecteur vidéo

Un composant de lecteur vidéo réactif conçu pour un blog ou la consommation de contenu avec des micro-interactions et une palette de couleurs pastel. Il comprend une fonctionnalité lecture/pause et un contrôle du volume. La conception comprend également la prise en charge du mode sombre.

Ouvrir