playlist


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vídeos do YouTube</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        #videoContainer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            display: none;
        }

        #player {
            width: 100%;
            height: 360px;
        }

        #dropdown {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1;
            display: inline-block;
        }

        #dropdownContent {
            display: none;
            position: absolute;
            background-color: #333;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            min-width: 160px;
            z-index: 1;
        }

        #dropdown button {
            background-color: #333;
            color: white;
            padding: 10px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        #dropdownContent a {
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        #dropdownContent a:hover {
            background-color: #555;
        }
    </style>
</head>
<body>

    <div id="dropdown">
        <button onclick="toggleDropdown()">Clique aqui</button>
        <div id="dropdownContent">
            <a href="javascript:void(0)" onclick="loadPlaylist('PLPuTuKInxLDMYgn7tPLimd7U5qWn83sYj')">Playlist 1</a>
            <a href="javascript:void(0)" onclick="loadPlaylist('PLPb0hyjbXnkoZ9vs0Us4DoLVn2fVrlQWC')">Playlist 2</a>
            <a href="javascript:void(0)" onclick="loadPlaylist('PLyklBR4eLE2ZC9VZDUfCHVqtgl78YvbqM')">Forro atg</a>
            <a href="javascript:void(0)" onclick="loadPlaylist('PLJn4hP4ODKFykbV59b2XWmw7GVrzokGrf')">pISADINHA atg</a>
            <a href="javascript:void(0)" onclick="loadPlaylist('RDa42Y37YSuCM')">Muuuuuuuuuu atg</a>
            <a href="javascript:void(0)" onclick="loadPlaylist('PLNZ3Ss0T52ZJ00rNHhhotS5EpbcEo4yBS')">Mucao22222 atg</a>
            <a href="javascript:void(0)" onclick="loadPlaylist('PLUUbgea4rQYDXWou8VIvH1gLmg9OAEyex')">mIX MUCAO</a>
            <a href="javascript:void(0)" onclick="loadPlaylist('tRsukCHYWP8')">11 de muh antiga</a>

            <a href="javascript:void(0)" onclick="loadPlaylist('PL9IA2wt9WiE9VpX4khA-GWKM9hhZV3hOM')">Sertanejo Antigas</a>
            <a href="javascript:void(0)" onclick="loadPlaylist('PL86Y3BW5O5CK13_rHsALKp2UHMoWSef5z')">Sertanejo 2024</a>
        </div>
    </div>

    <div id="videoContainer">
        <div id="player"></div>
    </div>

    <script src="https://www.youtube.com/iframe_api"></script>
    <script>
        var player;

        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '180',
                width: '240',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        function onPlayerReady(event) {
            // O player está pronto
        }

        function onPlayerStateChange(event) {
            // O estado do player mudou
        }

        function loadPlaylist(playlistId) {
            player.loadPlaylist({
                list: playlistId,
                listType: 'playlist',
                index: 0,
                suggestedQuality: '360'
            });
            document.getElementById('videoContainer').style.display = 'block';
            closeDropdown();
        }

        function toggleDropdown() {
            var dropdownContent = document.getElementById('dropdownContent');
            dropdownContent.style.display = (dropdownContent.style.display === 'block') ? 'none' : 'block';
        }

        function closeDropdown() {
            var dropdownContent = document.getElementById('dropdownContent');
            dropdownContent.style.display = 'none';
        }
    </script>

</body>
</html>