Componente de reproductor de vídeo

<div class="flex flex-col items-center justify-center p-4 bg-gray-800 rounded-lg shadow-lg max-w-md w-full">
    <div class="relative w-full pt-9/16">
        <iframe class="absolute top-0 left-0 w-full h-full rounded-lg" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="flex justify-between items-center w-full mt-4 text-white">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            <span class="font-bold">Username</span>
        </div>
        <div class="flex items-center">
            <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
                Play
            </button>
            <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 ml-2 rounded">
                Pause
            </button>
        </div>
    </div>
    <div class="flex flex-col w-full mt-4">
        <input type="range" class="appearance-none w-full h-2 bg-gray-600 rounded-lg" value="50" />
        <div class="flex justify-between text-xs text-gray-400">
            <span>0:00</span>
            <span>3:45</span>
        </div>
    </div>
</div>

<style>
    .pt-9\/16 {
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }

    .dark {
        background-color: #1F2937;
    }
    .dark .bg-gray-800 {
        background-color: #4B5563;
    }
</style>