Youtube Müzik Player

Merhaba,

Sitemde youtube video kodları ile müzik oynatmak istiyorum ama sadece player olacak video şeklinde görüntülenmeyecek bunun için bir plugin varmıdır acaba bildiğiniz?

HTML:

<div data-video="_nj-LnZqY-0" data-autoplay="0" data-loop="1" id="youtube-audio"></div>

JS:

<script>
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        var player;
        function onYouTubeIframeAPIReady() {
            var ctrlq = document.getElementById("youtube-audio");
            ctrlq.innerHTML = '<img id="youtube-icon2" src=""/><div id="youtube-player"></div>';
            ctrlq.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
            ctrlq.onclick = toggleAudio;
            player = new YT.Player('youtube-player', {
                height: '0',
                width: '0',
                videoId: ctrlq.dataset.video,
                playerVars: {
                    autoplay: ctrlq.dataset.autoplay,
                    loop: ctrlq.dataset.loop,
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
        function togglePlayButton(play) {
            document.getElementById("youtube-icon2").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
        }
        function toggleAudio() {
            if (player.getPlayerState() == 1 || player.getPlayerState() == 3) {
                player.pauseVideo();
                togglePlayButton(false);
            } else {
                player.playVideo();
                togglePlayButton(true);
            }
        }
        function onPlayerReady(event) {
            player.setPlaybackQuality("small");
            document.getElementById("youtube-audio").style.display = "block";
            togglePlayButton(player.getPlayerState() !== 5);
        }
        function onPlayerStateChange(event) {
            if (event.data === 0) {
                togglePlayButton(false);
            }
        }
    </script>

Hocam Emeğine Sağlık Güzel olmuş ama aradığım bu değil. tam olarak ama işime yaradı biraz değiştirdiğimde.

Peki bunu nasıl bir sayfada birkaç şarkıyı birden çaldırabilirim acaba? Aşağıdaki Resimdeki Gibi Bir Proje yapmaya çalışıyorum. Başlat Kısmına Player getirdim ama ayırıp her parça için nasıl ekleyebilirim.

Örnek verdiğin kodu aşağıdaki gibi farklı videolar olacak hangisine tıklarsa o çalacak gibi.

<div data-video="_nj-LnZqY-0" data-autoplay="0" data-loop="1" id="youtube-audio"></div>,

<div data-video="_nj-LnZqY-0" data-autoplay="0" data-loop="1" id="youtube-audio"></div>

<div data-video="_nj-LnZqY-0" data-autoplay="0" data-loop="1" id="youtube-audio"></div>

<div data-video="_nj-LnZqY-0" data-autoplay="0" data-loop="1" id="youtube-audio"></div>