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 conçu avec glassmorphism, avec un effet de verre dépoli avec des couleurs complémentaires. Il est interactif et réactif, adapté à la consommation de contenu de blog avec prise en charge du thème sombre.
Lecteur vidéo
Composant de lecteur vidéo avec style Material Design, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
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.