Componente lettore video
Componente del lettore video Material Design con modalità scura
Codice HTML
<div class="container mx-auto p-4 dark:bg-gray-900">
<div class="bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800">
<div class="relative pb-9/16">
<iframe class="absolute w-full h-full" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Video Title</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">Author Name</p>
<p class="text-gray-600 dark:text-gray-400">Posted on October 26, 2023</p>
</div>
</div>
<div class="flex justify-between items-center mt-4">
<div class="flex space-x-4">
<button class="text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H12v-7H4v-7H3a2 2 0 01-2-2V5a2 2 0 012-2h1a2 2 0 012 2v2h0a2 2 0 002 2v1h2a2 2 0 002-2zm0 0v6m0-6a2 2 0 100-4 2 2 0 000 4z"></path></svg>
</button>
<button class="text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.618 2H12v7h8v7h1a2 2 0 012 2v1a2 2 0 01-2 2h-1a2 2 0 01-2-2v-2h0a2 2 0 00-2-2v-1h-2a2 2 0 00-2 2zm0 0v6m0-6a2 2 0 100-4 2 2 0 000 4z"></path></svg>
</button>
</div>
<button class="text-gray-500 hover:text-green-500 dark:text-gray-400 dark:hover:text-green-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h9.634c.399 0 .701.232.8.519l7.273 17.209c.1.287-.08.609-.407.609H18.54l-5.007-12.623z"></path></svg>
</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente del lettore video retrò
Un componente per lettore video interattivo progettato con un'estetica retrò/vintage, caratterizzato da una combinazione di colori in scala di grigi e molteplici elementi interattivi adatti per scopi di e-commerce, con supporto per la modalità oscura.
Lettore video minimalista
Componente Lettore video codificato in HTML con Tailwind CSS. Ha un design minimalista che utilizza una combinazione di colori in scala di grigi, destinata all'uso sul cruscotto. È un componente complesso con più elementi interattivi ed è completamente reattivo con il supporto della modalità oscura.
Componente lettore video
Un componente del lettore video progettato con vetromorfisma, caratterizzato da un effetto simile al vetro smerigliato con colori complementari. È interattivo e reattivo, adatto per il consumo di contenuti di blog con supporto per temi scuri.