Componente lettore video
Un componente del lettore video reattivo progettato con lo stile glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, supporto per temi scuri e immagini segnaposto.
Codice 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>Componenti correlati
Componente lettore video
Un componente del lettore video reattivo progettato con lo stile Neumorphism, utilizzando Tailwind CSS. È dotato di supporto per la modalità oscura con ombre sottili per dare un aspetto morbido all'interfaccia utente.
Componente lettore video
Un componente di riproduzione video complesso e reattivo per l'e-commerce, con colori triadici e un design incentrato sulla microinterazione. Include controlli di riproduzione, volume, barra di avanzamento, schermo intero, impostazioni e una sovrapposizione del prodotto, con supporto completo della modalità scura.
Componente lettore video
Un componente del lettore video reattivo progettato per la modalità oscura con una combinazione di colori analoga per il consumo di contenuti.