Not Getting My Custom Events To Track iFrame Video Metrics

[#1]

Hi There,

We are running a test on product display pages w/ different product review videos injected with an iFrame + src from YouTube. 

I followed the documentation provided in the Knowledge Base on how to setup tracking around this. 

I have the necessary class/id parameters for the iFrame

I have setup <id>Play, <id>Pause, <id>Finish custom events.

I have included the experiment Javascript below, but I am just wondering what the NOTE* pertains to in regards to changing the domain?

Any help here would be greatly appreciated!
Tanks

/* _optimizely_evaluate=force */
//this is a boilerplate set of calls to append a new script to your head tag
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src="https://www.youtube.com/iframe_api";
head.appendChild(script);
/**
* iFrame API (for iframe videos)
* onYouTubeIframeAPIReady is called for each player when it is ready
*/
window.onYouTubeIframeAPIReady = function(){
 
    $('.video-tracking').each(function() {
        var iframe = optimizely.$(this);
        // get the player(s)
        var player = new YT.Player(iframe[0], {
            events: {
                'onReady': function(e){
                    console.log('YouTube player \'' +iframe.attr('id') +'\': ready');
                    e.target._donecheck=true;
                },
                'onStateChange': function(e){
                    onStateChange(iframe.attr('id'), e);
                }
            }
        });
    });
};

//execute the API calls for play, pause, and finish
window.onStateChange = function(playerid, state) {
    if(state.data === 0) { 
        onFinish(playerid);
    } else if(state.data === 1) { 
        onPlay(playerid);
    } else if(state.data === 2) { 
        onPause(playerid);
    }
};

//for each of the above three states, make a custom event API call to Optimizely
window.onPause = function(id) {
    console.log('YouTube player \'' +id +'\': pause');
    window['optimizely'] = window['optimizely'] || [];
    window.optimizely.push(["trackEvent", id +"Pause"]);
};
 
window.onFinish = function(id) {
    console.log('YouTube player \'' +id +'\': finish');
    window['optimizely'] = window['optimizely'] || [];
    window.optimizely.push(["trackEvent", id +"Finish"]);
};
 
window.onPlay = function(id) {
    console.log('YouTube player \'' +id +'\': play');
    window['optimizely'] = window['optimizely'] || [];
    window.optimizely.push(["trackEvent", id +"Play"]);
};
/* _optimizely_evaluate=safe */

[#2]

Browser Security prevents you from seeing anything inside of an iFrame.
The most you can do is track that a user clicked anywhere in the iFrame, but you cannot target any elements that exist within the frame.
Unless you also control the code that runs in the iFrame, there is no workaround for this.

[#3]

Thanks for the heads up here.

So if we are just loading the video through an iFrame, then there is no way to actually track video views (pauses, etc)?

I guess I can just setup a click event on the iFrame <id> instead?

Thanks!

[#4]

Yup! 

You should be able to track clicks on the iFrame's id, you just won't be able to tell what they clicked.

Hopefully you can get some play/pause/pct viewed/completed metrics from the video platform.