Componentes Reproductor de vídeo Componente de reproductor de vídeo

Componente de reproductor de vídeo

Un componente de reproductor de vídeo sensible diseñado para el modo oscuro con un esquema de color análogo para el consumo de contenido.

Vista previa

Código HTML

<div class="bg-gray-900 text-gray-300 p-4 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="relative aspect-w-16 aspect-h-9">
        <video class="rounded-lg" controls>
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="mt-4">
        <h2 class="text-lg font-semibold">Video Title</h2>
        <p class="text-sm">This is a short description of the video content. It provides context and encourages the viewer to watch the video.</p>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <div>
            <h3 class="text-md font-semibold">Username</h3>
            <p class="text-xs text-gray-500">Posted on <time datetime="2023-10-01">October 1, 2023</time></p>
        </div>
    </div>
</div>

Componentes relacionados

Componente de reproductor de vídeo

Un componente de reproductor de video receptivo diseñado con una estética inspirada en el papel / impresión y una combinación de colores complementaria, adecuada para plataformas de foros o comunidades. Incluye soporte para modo oscuro y HTML semántico.

Abrir

Componente de reproductor de vídeo

Un componente de reproductor de video de estilo retro / vintage con diseño receptivo y soporte de modo oscuro usando Tailwind CSS.

Abrir

Reproductor de vídeo

Componente de reproductor de video con estilo Material Design, efectos responsivos y soporte de temas oscuros mediante Tailwind CSS.

Abrir