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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="relative w-full max-w-lg p-5 bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-lg border border-gray-200 dark:bg-gray-900 dark:bg-opacity-30 dark:border-gray-700">
<video class="w-full 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 class="mt-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Video Title</h2>
<p class="text-gray-600 dark:text-gray-400">Brief description of the video content that gives users an idea of what to expect.</p>
</div>
<div class="flex items-center mt-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-gray-200 font-medium">User Name</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Published on: <time datetime="2023-10-01">October 1, 2023</time></p>
</div>
</div>
</div>
</div>Composants associés
Composant du lecteur vidéo
Un composant de lecteur vidéo réactif conçu avec le style Neumorphism, utilisant Tailwind CSS. Il prend en charge le mode sombre avec des ombres subtiles pour donner une apparence d’interface utilisateur douce.
Composant du lecteur vidéo
Un composant de lecteur vidéo minimaliste conçu pour les interfaces de médias sociaux, avec une mise en page réactive avec prise en charge du thème sombre.
Material_Design_Video_Player_Component
Un composant de lecteur vidéo réactif avec une esthétique de conception matérielle, une palette de couleurs neutres chaudes, une prise en charge du mode sombre, adapté aux systèmes de réservation. Comprend une vignette vidéo, un bouton de lecture, un titre, une description et un appel à l’action « Réserver maintenant ».