Youtube iFrame API Passing data from onYouTubeIframeAPIReady to onPlayerStateChange function

Question

I am required to initialize list of Youtube iframe video

because there is many youtube video and the list are changeable from admin site I am required to make it dynamic, which is using class instead of id

this is the current code

const players = [];

onYouTubeIframeAPIReady(0);
onYouTubeIframeAPIReady(1);

function onYouTubeIframeAPIReady(index) {
    players[index] = new YT.Player($('.wow_youtube_video')[index], {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerStateChange(event) {
    
    // play
    if(event.data == 1){
        action = 'play';
    }

    // pause
    if(event.data == 2){
        action = 'pause';
    }

    if(event.data == 1 || event.data == 2){
        dataLayer.push({
            'event': 'trackEvent',
            'eventDetails.category': 'videos',
            'eventDetails.action': action,
            'eventDetails.label': players[0].getVideoData().title // players[0] supposedly be players[index] but don't know how to pass the index balue from above function to this function
            'videoName': players[0].getVideoData().title, //video name
            'videoType': 'video on demand' //video type
        });

    }

}

as you can see above, the 8th line from the bottom

'eventDetails.label': players[0].getVideoData().title,

this code here the

players[0] supposedly be players[index] but I don't know how to pass the index value from

players[index] = new YT.Player($('.wow_youtube_video')[index], {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });

to the onPlayerStateChange function

the purpose of this is to be able to carry the index value so that the code can be dynamic, thus I only need to put class name wow_youtube_video on any youtube iframe to make it works

Any help is appreciated, thank you

Answer 1

on function onYouTubeIframeAPIReady add this

players[index] = new YT.Player($('.wow_youtube_video')[index], {
    events: {
        'onStateChange': onPlayerStateChange.bind(index)
    }
});

now you can get index in onPlayerStateChange by

function onPlayerStateChange(event) {
   let index = this;
   console.log(index);
}