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

<div class="p-4 md:p-8 lg:p-12 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl overflow-hidden rounded-2xl shadow-2xl dark:shadow-none transition-all duration-300 transform bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:shadow-3xl dark:hover:shadow-none">
    <div class="md:flex">
      <!-- Video Player Section -->
      <div class="flex-1 relative aspect-video bg-black rounded-t-2xl md:rounded-tr-none md:rounded-l-2xl overflow-hidden">
        <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity duration-300">
        <div class="absolute inset-0 flex items-center justify-center">
          <button class="p-4 rounded-full bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-30 backdrop-blur-sm text-white hover:scale-110 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-600 focus:ring-opacity-50">
            <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5v14l11-7z"/>
            </svg>
          </button>
        </div>

        <!-- Controls Overlay Placeholder -->
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent opacity-90 text-white flex flex-col space-y-2">
          <div class="flex items-center space-x-2">
            <button class="text-white hover:text-blue-400 focus:outline-none">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 5v14l11-7z"/>
              </svg>
            </button>
            <div class="flex-1 h-2 bg-gray-700 rounded-full">
              <div class="h-full w-2/3 bg-blue-500 rounded-full"></div>
            </div>
            <span class="text-sm text-gray-300">0:45 / 2:30</span>
            <button class="text-white hover:text-blue-400 focus:outline-none">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            <button class="text-white hover:text-blue-400 focus:outline-none hidden sm:block">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4v16m8-8H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Details and Sidebar Section -->
      <div class="w-full md:w-2/5 p-6 md:p-8 flex flex-col justify-between">
        <div>
          <h2 class="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white mb-3 leading-tight">
            Exploring the Hidden Gems of Patagonia
          </h2>
          <p class="text-sm text-blue-600 dark:text-blue-400 font-medium mb-4 uppercase tracking-wider">
            Travel Documentary • Adventure
          </p>
          <p class="text-gray-700 dark:text-gray-300 text-base mb-6 leading-relaxed">
            Join us on an unforgettable journey through the breathtaking landscapes of Patagonia. Discover majestic glaciers, pristine lakes, and towering peaks in this stunning adventure.
          </p>
          
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Key Highlights:</h3>
            <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
              <li>Perito Moreno Glacier's stunning ice formations</li>
              <li>Trekking through Torres del Paine National Park</li>
              <li>Wildlife spotting: guanacos, condors, and pumas</li>
              <li>Kayaking in turquoise glacial waters</li>
            </ul>
          </div>
        </div>

        <div class="pt-4 border-t border-gray-200 dark:border-gray-700 mt-auto">
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Traveller User" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white">Filmed by: John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Adventure Vlogger</p>
            </div>
          </div>
          <a href="#" class="inline-block w-full py-3 px-6 rounded-lg text-center font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 shadow-lg">
            Book Your Patagonia Tour Now
          </a>
        </div>
      </div>
    </div>
  </div>
</div>