Componente de reproductor de vídeo
Un componente de reproductor de video simple diseñado con un estilo 3D y una combinación de colores pastel, adecuado para tableros.
Código HTML
<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>Componentes relacionados
Componente de reproductor de vídeo
Un reproductor de video de estilo Glassmorphism con elementos translúcidos similares al vidrio esmerilado, una combinación de colores pastel y una interfaz compleja adecuada para sitios web comerciales / corporativos. Es compatible con el diseño responsivo y un tema oscuro que utiliza Tailwind CSS, sin JavaScript.
Componente de reproductor de vídeo
Un componente de reproductor de video receptivo diseñado para un blog o consumo de contenido con microinteracciones y una combinación de colores pastel. Incluye funcionalidad de reproducción/pausa y un control de volumen. El diseño también incluye soporte para el modo oscuro.
Reproductor de video minimalista
Componente de reproductor de vídeo codificado en HTML con Tailwind CSS. Tiene un diseño minimalista que utiliza un esquema de color en escala de grises, destinado al uso en el tablero. Es un componente complejo con múltiples elementos interactivos y es totalmente responsivo con soporte para modo oscuro.