Componente de reproductor de vídeo
Un componente de reproductor de vídeo responsivo diseñado con un estilo de morfismo de vidrio, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, compatibilidad con temas oscuros e imágenes de marcador de posición.
Código HTML
<div class="flex flex-col items-center justify-center w-full h-screen bg-gray-800">
<div class="bg-white bg-opacity-20 backdrop-blur-lg p-4 rounded-lg shadow-lg w-full max-w-md">
<div class="relative w-full aspect-w-16 aspect-h-9">
<video class="rounded-lg" 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="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="text-white">
<h3 class="text-lg font-semibold">Video Title</h3>
<p class="text-sm text-gray-300">Uploaded by User Name</p>
</div>
</div>
<div class="flex justify-around mt-4">
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none">Like</button>
<button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 focus:outline-none">Share</button>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
.bg-white {
background-color: rgba(255, 255, 255, 0.2);
}
.text-white {
color: #edf2f7;
}
.text-gray-300 {
color: #e2e8f0;
}
}
</style>Componentes relacionados
Componente de reproductor de vídeo
Componente de reproductor de video receptivo con diseño Glassmorphism, combinación de colores de tonos tierra y compatibilidad con modo oscuro. Utiliza HTML simple y CSS de Tailwind.
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.
Reproductor de vídeo
Componente de reproductor de video con microinteracciones, combinación de colores complementaria, complejidad moderada y diseño receptivo con soporte de tema oscuro para uso de cartera.