Componente di incorporamento multimediale
Un componente Media Embed reattivo con supporto per temi scuri per blog/siti di contenuti, con uno stile basato sui principi del Material Design, una combinazione di colori triadica e una complessità moderata. Include un segnaposto video incorporato e collegamenti agli articoli correlati.
Codice HTML
<div class="container mx-auto p-4 max-w-3xl">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="relative" style="padding-top: 56.25%;">
<!-- 16:9 Aspect Ratio -->
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Embedded Media Title</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Published on October 27, 2023</p>
<p class="text-gray-700 dark:text-gray-200 mb-4">This is a description of the embedded media content. It provides context and information about the video.</p>
<div class="border-t border-gray-200 dark:border-gray-700 pt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Related Articles</h3>
<ul>
<li class="mb-2">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 1</a>
</li>
<li class="mb-2">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 2</a>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>Componenti correlati
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 14 dell'incorporamento dei file multimediali
Un componente Media Embed progettato in uno stile scheumorfico, con effetti reattivi e supporto per temi scuri. Include un'immagine, una descrizione e un avatar dell'utente.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale progettato per l'e-commerce con uno stile di progettazione 3D, una combinazione di colori complementari e un layout reattivo che supporta la modalità scura.