Componente lettore video
Un semplice componente del lettore video progettato utilizzando i principi di Material Design con un layout reattivo e il supporto del tema scuro.
Codice HTML
<div class="max-w-xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-8">
<div class="relative overflow-hidden">
<video class="w-full h-auto" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Video Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-1">This is a short description of the video content. It provides useful information about what the viewer can expect.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<div>
<p class="text-gray-800 dark:text-white">Author Name</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Date Uploaded</p>
</div>
</div>
</div>
</div>Componenti correlati
Skeuomorphic_Farm_Video_Player
Un componente del lettore video scheumorfico progettato per siti Web agricoli e agricoli, caratterizzato da bianco e nero con un colore d'accento brillante, layout reattivo e supporto per la modalità scura.
Componente lettore video
Un componente complesso per il lettore video ad alto contrasto con un'estetica Material Design, adatto per siti Web di viaggi/turismo. Presenta un design reattivo, supporto per la modalità oscura ed elementi interattivi.
Material_Design_Video_Player_Component
Un componente del lettore video reattivo con estetica Material Design, combinazione di colori neutri caldi, supporto per la modalità scura, adatto per sistemi di prenotazione/prenotazione. Presenta una miniatura del video, un pulsante di riproduzione, un titolo, una descrizione e un invito all'azione "Prenota ora".