Videoplayer-Komponente

Eine einfache Videoplayer-Komponente, die nach den Prinzipien von Material Design mit einem responsiven Layout und Unterstützung für dunkle Themen entwickelt wurde.

Vorschau

HTML-Code

<div class="max-w-xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-8">
    <div class="relative overflow-hidden">
        <video class="w-full h-auto" controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mt-1">This is a short description of the video content. It provides useful information about what the viewer can expect.</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <div>
                <p class="text-gray-800 dark:text-white">Author Name</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Date Uploaded</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Videoplayer-Komponente

Eine reaktionsschnelle Videoplayer-Komponente, die für den Dunkelmodus mit einem analogen Farbschema für den Konsum von Inhalten 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

Neon_Glow_Video_Player

Eine einfache, reaktionsschnelle Videoplayer-Komponente für Geschäfts-/Unternehmenswebsites mit Neon-/Leuchteffekten und einem warmen Farbschema für den Sonnenuntergang. Enthält Unterstützung für den Dunkelmodus.

Offen