Embed 2 youtube audio players ipv 1

[Baze88]

Beste forumleden,

Op dit moment ben ik bezig met een project voor school waarbij ik onderscheid moet maken tussen Adele en Lionel Richie met het nummer "hello"
Dit onderscheid wordt gemaakt met een counter waar mensen op kunnen klikken om te 'stemmen'. Bij het stemmen moet ik de gelegenheid geven om het nummer nog eens af te spelen bij elke zanger. Nu heb ik het voor elkaar gekregen om een nummer te embedde, maar het lukt mij maar niet om er 2 in te krijgen (dus het nummer van Lionel en van Adele). Iemand een idee hoe ik dit moet doen?
Hoor het graag!

Met vriendelijke groet,

Bas Kemp

PS. Als iemand ook nog een click counter aan kan raden, hoor ik het graag. Deze moet ik namelijk ook nog maken en stijlen... Ik schrijf zelf geen javascript, dus ben druk op zoek.

Thanks!


Codes:

HTML:

<div id="music-wrapper">
                             <div class="adele">
                                  <div data-video="FB4OOpo4sBU" data-autoplay="0" data-loop="1" id="youtube-audio"></div>
                                  </div> 
 
                                   <div class="lionel">
                                  		<div data-video="62XB9IbMnxQ" data-autoplay="0" data-loop="1" id="youtube-audio"></div>
                                  </div>

                            </div>

js:
[js]
var player;
function onYouTubeIframeAPIReady() {

var ctrlq = document.getElementById("youtube-audio");
ctrlq.innerHTML = '<img id="youtube-icon" src=""/><div id="youtube-player"></div>';
ctrlq.style.cssText = 'width:150px;margin:2em auto;cursorointer;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-icon").src = play ? "https://i.imgur.com/XJSHcOg.png" : "https://i.imgur.com/4qm3muk.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);
}
}
[/js]

 

[bron]

Hoi, Je wilt een uitgebreide versie met de API. Daar heb ik zo gauw geen voorbeeld van maar wel van een eenvoudige versie die ik ooit heb gemaakt voor een responsive website. Misschien heb je er wat aan. Zie bijlage.

Suc6 met de YT player. Have fun.