CCHub Logo CCHub Tailwind Collection
Komponenten Videoplayer (Videoplayer) Videoplayer (Videoplayer)

Videoplayer (Videoplayer)

Videoplayer-Komponente mit Mikrointeraktionen, komplementärem Farbschema, moderater Komplexität und responsivem Design mit Unterstützung für dunkles Design für die Portfolio-Verwendung.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden max-w-xl mx-auto">
  <div class="relative">
    <video class="w-full" controls poster="https://picsum.photos/id/1018/1000/600/">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50">
      <button class="text-white text-4xl">
        ▶
      </button>
    </div>
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Project Title</h3>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Brief description of the project or video content.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
    </div>
  </div>
</div>

Verwandte Komponenten

Videoplayer-Komponente

Responsive Videoplayer-Komponente mit Glassmorphism-Design, Farbschema für Erdtöne und Unterstützung für den Dunkelmodus. Verwendet einfaches HTML und Tailwind CSS.

Offen

Videoplayer-Komponente 3

Eine reaktionsschnelle Videoplayer-Komponente, die im Neumorphism-Stil mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS entwickelt wurde.

Offen

Videoplayer-Komponente

Ein Videoplayer im Glassmorphism-Stil mit durchscheinenden Elementen aus Milchglas, pastellfarbenem Farbschema und einer komplexen Benutzeroberfläche, die für Geschäfts-/Unternehmenswebsites geeignet ist. Es unterstützt responsives Design und ein dunkles Theme mit Tailwind CSS ohne JavaScript.

Offen