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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden max-w-xl mx-auto">
<div class="relative">
<video class="w-full" controls poster="https://picsum.photos/id/1018/1000/600/">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50">
<button class="text-white text-4xl">
▶
</button>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Project Title</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Brief description of the project or video content.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
</div>
</div>
</div>Composants associés
Lecteur vidéo Composant 3
Un composant de lecteur vidéo réactif conçu dans le style Neumorphism avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant du lecteur vidéo
Un composant de lecteur vidéo réactif conçu pour un blog ou la consommation de contenu avec des micro-interactions et une palette de couleurs pastel. Il comprend une fonctionnalité lecture/pause et un contrôle du volume. La conception comprend également la prise en charge du mode sombre.
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.