Composant du lecteur vidéo
Composant de lecteur vidéo réactif avec design Glassmorphism, palette de couleurs Earth tones et prise en charge du mode sombre. Utilise un HTML simple et un CSS Tailwind.
HTML Code
<div class="relative flex items-center justify-center w-full h-auto bg-gray-200 dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl">
<div class="absolute inset-0 bg-black bg-opacity-10 backdrop-filter backdrop-blur-lg"></div>
<video controls class="relative z-10 w-full max-h-96 rounded-lg" poster="https://picsum.photos/seed/picsum/800/600">
<source src="your_video_source.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-20 backdrop-filter backdrop-blur-lg z-10">
<div class="flex items-center justify-between">
<div class="flex items-center">
<button class="text-white hover:text-gray-300 focus:outline-none mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 13.803V6.197a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<div class="text-sm text-white">0:00 / 0:00</div>
</div>
<div class="flex items-center">
<button class="text-white hover:text-gray-300 focus:outline-none mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-2.829a9 9 0 010 12.728M5.636 5.636a9 9 0 0112.728 0m-2.828 2.828a5 5 0 01-7.072 0m7.072 7.072a5 5 0 010-7.072m-2.828 2.828a9 9 0 01-12.728 0m-.001 0a9.997 9.997 0 00-1.912 2.483m1.398 3.463c.374.271.797.448 1.265.526M12 8C8.134 8 5 11.134 5 15s3.134 7 7 7c1.73 0 3.36-.423 4.792-1.166M12 17.25a.25.25 0 00-.25.25v.25c0 .138.112.25.25.25h.01a.25.25 0 00.25-.25v-.25a.25.25 0 00-.25-.25h-.01z" />
</svg>
</button>
<button class="text-white hover:text-gray-300 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
</div>
</div>
Composants associés
Skeuomorphic_Farm_Video_Player
Un composant de lecteur vidéo skeuomorphe conçu pour les sites Web agricoles et agricoles, avec du noir et blanc avec une couleur d’accent vive, une mise en page réactive et la prise en charge du mode sombre.
Composant du lecteur vidéo
Un lecteur vidéo de style Glassmorphism avec des éléments translucides semblables à du verre givré, une palette de couleurs pastel et une interface complexe adaptée aux sites Web d’entreprise. Il prend en charge le responsive design et un thème sombre utilisant Tailwind CSS, sans JavaScript.
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 ».