Composants Lecteur vidéo Composant du lecteur vidéo

Composant du lecteur vidéo

Un composant de lecteur vidéo simple conçu avec un style 3D et une palette de couleurs pastel, adapté aux tableaux de bord.

Aperçu

HTML Code

<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md mx-auto">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <iframe class="w-full h-64" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="flex flex-col items-start mt-4 w-full">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the video content.</p>
        <div class="flex items-center mt-2">
            <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-600 shadow-sm">
            <span class="ml-2 text-gray-800 dark:text-gray-100">Uploader Name</span>
        </div>
    </div>
</div>

Composants associés

Composant du lecteur vidéo

Un composant de lecteur vidéo simple conçu selon les principes de Material Design avec une mise en page réactive et une prise en charge du thème sombre.

Ouvrir

Composant de lecteur vidéo immobilier

Un composant de lecteur vidéo complexe et réactif pour les plateformes immobilières, doté d’une esthétique Material Design avec une palette de couleurs forêt/vert. Comprend le contrôle vidéo, les détails de la propriété et une liste de lecture, avec une prise en charge complète du mode sombre.

Ouvrir

Brutalist_RealEstate_VideoPlayer

Un composant de lecteur vidéo complexe, de style brutaliste, pour les annonces immobilières, avec un contraste élevé, une palette de couleurs forêt/vert et un design réactif avec prise en charge du mode sombre. Comprend les détails de la propriété, les informations sur l’agent et les boutons d’action.

Ouvrir