ビデオプレーヤーコンポーネント

<div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="relative pb-9/16">
      <iframe class="absolute 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-picture" allowfullscreen></iframe>
    </div>
    <div class="p-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Video Title</h3>
      <p class="text-gray-600 dark:text-gray-300 mt-2">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 mt-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="text-gray-900 leading-none dark:text-white">Author Name</p>
          <p class="text-gray-600 dark:text-gray-400">Posted on October 26, 2023</p>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="flex space-x-4">
          <button class="text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400">
            <svg class="h-6 w-6" 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="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H12v-7H4v-7H3a2 2 0 01-2-2V5a2 2 0 012-2h1a2 2 0 012 2v2h0a2 2 0 002 2v1h2a2 2 0 002-2zm0 0v6m0-6a2 2 0 100-4 2 2 0 000 4z"></path></svg>
          </button>
          <button class="text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-400">
            <svg class="h-6 w-6" 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="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.618 2H12v7h8v7h1a2 2 0 012 2v1a2 2 0 01-2 2h-1a2 2 0 01-2-2v-2h0a2 2 0 00-2-2v-1h-2a2 2 0 00-2 2zm0 0v6m0-6a2 2 0 100-4 2 2 0 000 4z"></path></svg>
          </button>
        </div>
        <button class="text-gray-500 hover:text-green-500 dark:text-gray-400 dark:hover:text-green-400">
          <svg class="h-6 w-6" 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.684 13.342C8.882 13.07 9.283 13 9.683 13h9.634c.399 0 .701.232.8.519l7.273 17.209c.1.287-.08.609-.407.609H18.54l-5.007-12.623z"></path></svg>
        </button>
      </div>
    </div>
  </div>
</div>