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

Videoplayer-Komponente

Eine einfache Videoplayer-Komponente, die mit einem 3D-Stil und einem Pastellfarbschema gestaltet ist und für Dashboards geeignet ist.

Vorschau

HTML-Code 

<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md mx-auto">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <iframe class="w-full h-64" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="flex flex-col items-start mt-4 w-full">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the video content.</p>
        <div class="flex items-center mt-2">
            <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-600 shadow-sm">
            <span class="ml-2 text-gray-800 dark:text-gray-100">Uploader Name</span>
        </div>
    </div>
</div>

Verwandte Komponenten

3D-monochromatischer Videoplayer

Eine reaktionsschnelle Videoplayer-Komponente mit 3D-Designelementen und monochromatischem Farbschema, die sich für ein Dashboard eignet.

Offen

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.

Offen

Videoplayer-Komponente

Minimalistische/flache Design-Videoplayer-Komponente für E-Commerce, reaktionsschnell mit Unterstützung für dunkle Themen

Offen