Componente di incorporamento multimediale
Un componente Media Embed reattivo con supporto per temi scuri, layout complesso e combinazione di colori complementari, progettato per le dashboard.
Codice HTML
<div class="container mx-auto p-6 bg-gray-900 text-gray-200">
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-2/3 px-4 mb-6 lg:mb-0">
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="relative" style="padding-top: 56.25%;">
<iframe class="absolute inset-0 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-screen" allowfullscreen></iframe>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-3 text-teal-400 dark:text-teal-500">Video Title Here</h3>
<p class="text-gray-400 mb-4">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 text-gray-500 text-sm">
<span><i class="far fa-eye mr-2"></i>1.2M Views</span>
<span class="ml-4"><i class="far fa-comment mr-2"></i>3.5K Comments</span>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 px-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<h4 class="text-lg font-semibold mb-4 text-orange-400 dark:text-orange-500">Related Content</h4>
<ul>
<li class="flex items-center mb-4">
<img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1018/60/60" alt="Related Video Thumbnail">
<div>
<p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Related Video Title</p>
<p class="text-gray-500 text-sm">Channel Name</p>
</div>
</li>
<li class="flex items-center mb-4">
<img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1015/60/60" alt="Related Video Thumbnail">
<div>
<p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Another Related Video</p>
<p class="text-gray-500 text-sm">Another Channel</p>
</div>
</li>
<li class="flex items-center">
<img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1019/60/60" alt="Related Video Thumbnail">
<div>
<p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Yet Another Video</p>
<p class="text-gray-500 text-sm">Yet Another Channel</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>Componenti correlati
Componente di incorporamento di contenuti multimediali retrò
Un componente Media Embed reattivo con un design "Retro/Vintage", ispirato all'estetica degli anni '80/'90 come i vecchi monitor CRT e i lettori VCR. Utilizza una combinazione di colori complementari di verde acqua e arancione su una base grigio ardesia, adatta per siti Web "Business/Corporate". Il componente presenta una complessità moderata con effetti di passaggio del mouse sul pulsante di riproduzione e sulla miniatura multimediale, un'animazione di luce REC finta ed elementi di controllo decorativi non funzionali. Include il supporto per il tema scuro utilizzando il prefisso "dark:" di Tailwind. L'area multimediale è progettata per un rapporto di aspetto 16:9 (richiede il plug-in Tailwind aspect-ratio o un fallback CSS come il trucco padding-bottom). Viene utilizzata l'immagine segnaposto da picsum.photos.
Componente di incorporamento dei media di neumorfismo
Un componente di incorporamento multimediale neumorfico per siti Web aziendali, con design reattivo e supporto per temi scuri utilizzando colori complementari.
Componente di incorporamento multimediale
Un componente multimediale incorporato con uno stile di progettazione 3D per profondità e coinvolgimento, effetti reattivi e supporto per la modalità scura.