How to get the videoid in onPlayerReady's argument - youtube-api

Question

I used to extract the videoid from the target argument as follows:
function onPlayerReady(event) {
var videoid = event.target.d.d.videoId;
var playerid = event.target.d.d.playerid;
// more stuff
}
Unfortunately, these seems to change rather frequently. I also used
event.target.d.id
before it was changed.
I can't seem to find how to get this information consistently. Also, what is d standing for? Is that a kind of debugging variable not considered for the public to use?
At the moment I seem to find it under
event.target.B.videoData.video_id
EDIT: With the suggested solution I'm not able to address custom properties, though.
When I instantiate the player with
new YT.Player(playerid, {
videoId: videoid,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
playerid : playerid
});
I'm giving it some properties that I require, here the playerid property. Since this is not a native property it doesn't appear in getVideoData(). Any idea how to store custom data in the object and address it later on consistently? I could address this property with temporary letter from the minification, though.

Answer 1

You're right that the single letters represent the video objects, but the letters are assigned based on whatever minification may have been run recently on the libraries. There is a method you can execute, however, to get the object into one of your own variables; try this:
var videodata = event.target.getVideoData();
Then, you can get the ID with:
videodata.video_id
When it comes to other attributes that you add in yourself, a lot of it depends on what custom data you're including. If it's only the id of the element pf the created player, you could use event.target.getVideoEmbedCode() to return an iframe element that has as its ID the playerID used to create the object. But other arbitrary data will not be exposed via any direct API method. You could always loop through every object attribute ... for (att in event.target) ... but that would require lots of recursion in case the object you need is several layers deep.
If it were me, I wouldn't store the custom data in the player object; I'd create a wrapper object instead, that's keyed to the video ID, allowing you to add as many object params as you'd like:
var myplayers={};
function onYouTubeIframeAPIReady() {
myplayers["M7lc1UVf-VE"] = {"player":new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: {
'html5':'1',
'controls': '0'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
}),
"playerid":"player",
"otherdata":"whatever"
};
}
function onPlayerReady(event) {
console.log(myplayers[event.target.getVideoData().video_id]);
}

Answer 2

If it helps anyone, this is what I ended up going with:
document.onPlayerReady = function(event) {
for( var item in event.target) {
if(event.target[item].id) {
var iFrameID = event.target[item].id;
...
break;
}
}
}