Komponenten Medien einbetten Komponente "Medien einbetten"

Komponente "Medien einbetten"

Eine responsive Media Embed-Komponente mit Unterstützung für dunkle Designs für Blog-/Content-Websites, die nach Material Design-Prinzipien, einem triadischen Farbschema und moderater Komplexität gestaltet ist. Enthält einen eingebetteten Videoplatzhalter und Links zu verwandten Artikeln.

Vorschau

HTML-Code

<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>

Verwandte Komponenten

Retro Media Embed-Komponente

Eine reaktionsschnelle Media Embed-Komponente mit einem "Retro/Vintage"-Design, inspiriert von der Ästhetik der 80er/90er Jahre wie alten Röhrenmonitoren und Videorekordern. Es verwendet ein komplementäres Farbschema aus Blaugrün und Orange auf schiefergrauer Basis, geeignet für "Business/Corporate"-Websites. Die Komponente zeichnet sich durch eine moderate Komplexität mit Hover-Effekten auf der Wiedergabeschaltfläche und der Medienminiaturansicht, einer gefälschten REC-Lichtanimation und dekorativen, nicht funktionalen Steuerelementen aus. Es enthält Unterstützung für dunkle Themen mit dem Präfix "dark:" von Tailwind. Der Medienbereich ist für ein Seitenverhältnis von 16:9 ausgelegt (erfordert das Tailwind Aspect-Ratio-Plugin oder einen CSS-Fallback wie padding-bottom-Trick). Es wird ein Platzhalterbild von picsum.photos verwendet.

Offen