HTML 代码
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
<div class="relative pb-9/16 mb-4">
<iframe class="absolute inset-0 w-full h-full rounded-md shadow-inner" 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="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 ring-2 ring-gray-400 dark:ring-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Skeuomorphic Media Title</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Channel Name</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">
This is a description of the media content. It provides a brief overview
and context for the embedded video or audio. The design features subtle
shadows and gradients to mimic a tangible, real-world object.
</p>
</div>