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 de lecteur vidéo rétro

Un composant de lecteur vidéo interactif conçu avec une esthétique rétro/vintage, avec une palette de couleurs en niveaux de gris et plusieurs éléments interactifs adaptés à des fins de commerce électronique, avec prise en charge du mode sombre.

Ouvrir

Composant du lecteur vidéo

Composant de lecteur vidéo de conception matérielle avec mode sombre

Ouvrir

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.

Ouvrir