Composant d’intégration de média

<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="relative bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-stone-200 dark:border-stone-700 overflow-hidden">
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-stone-300/40 via-stone-200/20 to-stone-100/10 dark:from-stone-700/40 dark:via-stone-800/20 dark:to-stone-900/10 rounded-xl"></div>
    
    <div class="relative z-10 space-y-4">
      <!-- Video/Media Placeholder -->
      <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-stone-300 dark:bg-stone-700 flex items-center justify-center">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full object-cover"></iframe>
      </div>
      
      <!-- Title -->
      <div class="text-xl font-semibold text-stone-800 dark:text-stone-100">
        Business Insights: Q3 Performance
      </div>
      
      <!-- Description -->
      <p class="text-stone-600 dark:text-stone-300 text-sm">
        A concise overview of our key achievements and strategic initiatives for the third quarter, highlighting growth and future outlook.
      </p>
      
      <!-- Action Button (Optional) -->
      <button class="w-full bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 ease-in-out">
        Learn More
      </button>
      
      <!-- Metadata/Source (Optional) -->
      <div class="flex items-center text-stone-500 dark:text-stone-400 text-xs mt-2">
        <svg class="w-4 h-4 mr-1" 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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span>Published: October 26, 2023</span>
      </div>
    </div>
  </div>
</div>