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
Skeuomorphic_Farm_Video_Player
Un componente de reproductor de video skeuomórfico diseñado para sitios web agrícolas y agrícolas, con blanco y negro con un color de acento brillante, diseño receptivo y soporte para modo oscuro.
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.
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.