Get reference of a player (YT.Player) already defined

Question

How can I access/get a player that already created?

In my case want add event listener on a player already create like this : https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors

The player is a local variable so it seems if I haven't global variable to reference it I can't access to this player outside the function.

To understand my problem, there is a website with an Youtube iframe wich defines a player locally in a function. I don't want create a new player on this iFrame and add event listener like this : https://developers.google.com/youtube/iframe_api_reference#Adding_event_listener player.addEventListener(event:String, listener:String):Void

I want add event listener to keep listener already defined when the player was created.

I don't want change the code wich declare the player because my code is in Google Tag Manager and it will add behavior on players already defined. Google Tag Manager

I'm pratically sure I can access player from iFrame but I don't find how... Or with the object window['YT'] defined in the script : iframe_api

Thanks

Regards

Thomas

score 2 · Answer 1 · edited May 23 '17 at 12:33

So, I find this solution : https://stackoverflow.com/a/36366737/6748629

I can get the player declare on an iFrame youtube with :

YT.get(#iFrame_id)

So i just have to parse the document, get player and addEventListener :

for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) {
    if (/youtube.com\/embed/.test(e[x].src)) {
        // get player if exist or create one without listener
        var player = YT.get(e[x].id)||new YT.Player(e[x], {
            events: {
            }
        });
        // now you can add listener and keep behavior when player already declared
        player.addEventListener("onStateChange",onPlayerStateChange);

    }
}

I hope it will help others.

Get reference of a player (YT.Player) already defined

1 Answers1