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>

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. — alaska22
– alaska22, Commented Oct 9 at 4:15
you should add an answer to your question not a comment if you figured it out — Linda Lawton - DaImTo
– Linda Lawton - DaImTo, Commented Oct 9 at 8:19

alaska22 · Accepted Answer · 2025-10-10 00:45:53Z

0

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.

answered Oct 10 at 0:45

alaska22

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using embedded youtube playlist index to cycle through array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related