Using embedded youtube playlist index to cycle through array

Question

I have a youtube playlist embedded in an iframe and was hoping to use the playlist index to cycle through an array of titles on-screen (i.e. when the next video starts playing, the next item in the array will show). Is this possible? It only shows the first in the array and doesn't change so what am I doing wrong? Apologies in advance because I'm very new to JS... this might be gibberish but I felt like I was on to something.

var myArray = ["song 1", "song 2"];
var player;
function onYouTubePlayerAPIReady() {
 player = new YT.Player('video', {
 events: {
 'onReady': onPlayerReady
 }
 });
}
function onPlayerReady(event) {
 console.log(Array.from(document.querySelectorAll('.ytd-playlist-video-list-renderer #video-title')).map((el) => {
 return el.textContent.trim()
 }).sort().join("\n"))
 var Number =
 player.getPlaylistIndex();
 var print = document.getElementById('print');
 print.innerHTML = myArray[Number];
}

<div id="print"></div>
<iframe
 id="video"
 src="https://www.youtube.com/embed?listType=playlist&list=ID&loop=1&enablejsapi=1&html5=1"
 frameborder="0"
 allowfullscreen
></iframe>

• alaska22: never mind, i figured it out! but will leave here in case someone wants to do something similar. i was using onPlayerReady as the event when i should have used onPlayerStateChange . And the console.log was nonsense that I forgot to delete... ain't that just the way.
• Linda Lawton - DaImTo: you should add an answer to your question not a comment if you figured it out
• alaska22: sorry, new to this site! posting now.

Answer 1

never mind, i figured it out! but will leave here in case someone wants to do something similar. i was using onPlayerReady as the event when i should have used onPlayerStateChange . And the console.log was nonsense that I forgot to delete... ain't that just the way.

• Mauricio Arias Olave: Well done by figuring out the solution. Please remember to accept the answer. Thank you.