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.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl p-6 w-full max-w-md">
<div class="video-container rounded-2xl overflow-hidden">
<img src="https://picsum.photos/600/400?random=1" alt="Video Thumbnail" class="w-full h-full object-cover">
<div class="play-button bg-gray-300 dark:bg-gray-700 rounded-full p-2 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-5.4 3.24a1 1 0 01-1.552-.832V9.664a1 1 0 011.552-.832l5.4 3.24a1 1 0 010 1.664z" />
</svg>
</div>
</div>
<div class="mt-4 text-gray-800 dark:text-gray-200 text-lg font-semibold">Video Title</div>
<div class="text-gray-600 dark:text-gray-400">Video description goes here. This is a brief overview of the content of the video.</div>
<div class="flex items-center justify-between mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="ml-2 text-gray-800 dark:text-gray-200">User Name</span>
</div>
<div class="text-gray-600 dark:text-gray-400">10:30</div>
</div>
</div>
</div>Composants associés
Composant de lecteur vidéo arc-en-ciel dégradé
Un composant de lecteur vidéo épuré et minimaliste pour les tableaux de bord, doté d’un schéma de couleurs arc-en-ciel dégradé, d’un design réactif et d’une prise en charge du mode sombre, incarnant le style typographique suisse/international.
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.
Neon_Glow_Video_Player
Un composant de lecteur vidéo simple et réactif pour les sites Web d’entreprise, avec des effets de néon/lueur et une palette de couleurs chaudes de coucher de soleil. Inclut la prise en charge du mode sombre.