Composant du lecteur vidéo
Un composant de lecteur vidéo réactif conçu dans le style glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou, la prise en charge des thèmes sombres et des images de remplacement.
HTML Code
<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>Composants associés
Composant du lecteur vidéo
Un composant de lecteur vidéo néomorphique conçu pour la présentation de portfolios, avec un thème sombre et un design réactif à l’aide de Tailwind CSS.
Lecteur vidéo
Composant de lecteur vidéo avec micro-interactions, palette de couleurs complémentaires, complexité modérée et conception réactive avec prise en charge du thème sombre pour une utilisation en portefeuille.
Lecteur vidéo minimaliste
Composant de lecteur vidéo codé en HTML avec Tailwind CSS. Il a un design minimaliste utilisant une palette de couleurs en niveaux de gris, destiné à une utilisation sur le tableau de bord. Il s’agit d’un composant complexe avec plusieurs éléments interactifs et est entièrement réactif avec la prise en charge du mode sombre.