Composant du lecteur vidéo
Un composant de lecteur vidéo de style rétro/vintage avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex flex-col items-center justify-center p-4 bg-gray-800 rounded-lg shadow-lg max-w-md w-full">
<div class="relative w-full pt-9/16">
<iframe class="absolute top-0 left-0 w-full h-full rounded-lg" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex justify-between items-center w-full mt-4 text-white">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<span class="font-bold">Username</span>
</div>
<div class="flex items-center">
<button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
Play
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 ml-2 rounded">
Pause
</button>
</div>
</div>
<div class="flex flex-col w-full mt-4">
<input type="range" class="appearance-none w-full h-2 bg-gray-600 rounded-lg" value="50" />
<div class="flex justify-between text-xs text-gray-400">
<span>0:00</span>
<span>3:45</span>
</div>
</div>
</div>
<style>
.pt-9\/16 {
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.dark {
background-color: #1F2937;
}
.dark .bg-gray-800 {
background-color: #4B5563;
}
</style>
Composants associés
Lecteur vidéo médical Art Déco
Un composant de lecteur vidéo simple et réactif avec une esthétique Art déco en niveaux de gris, conçu pour les applications médicales/de santé, y compris la prise en charge du mode sombre.
Composant de lecteur vidéo rétro en mode sombre
Un composant de lecteur vidéo réactif conçu pour les applications de sport/fitness, avec une palette de couleurs rétro atténuées et une prise en charge complète du mode sombre. Il comprend une vidéo de remplacement et des commandes avec une chronologie.
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.