Componente de reproductor de vídeo
Un componente de reproductor de video simple diseñado utilizando los principios de Material Design con un diseño receptivo y soporte de temas oscuros.
Código HTML
<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>Componentes relacionados
Brutalist_Video_Player
Un componente de reproductor de video de estilo brutalista para sitios web comerciales/corporativos, con alto contraste, tipografía audaz y una combinación de colores complementaria. Totalmente receptivo con soporte para modo oscuro.
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.
Componente de reproductor de vídeo
Un componente de reproductor de vídeo diseñado con morfismo de vidrio, con un efecto similar al vidrio esmerilado con colores complementarios. Es interactivo y receptivo, adecuado para el consumo de contenido de blog con soporte para temas oscuros.