How control YouTube player in iFrame?

I can successfully interact with the contents of an iFrame using C3's built in iFrame object and the new JavaScript facility. However, I can't figure out how to use this technique to control an embedded YouTube video.

I've experimented with a couple of options but had no luck so far:

Option 1: C3 JS sends commands directly to the YouTube iFrame which is embedded in the C3 iFrame.

Option 2: C3 JS sends commands to the C3 iFrame, which then sends commands to YouTube iFrame.

Unfortunately I don't know if either of these options is technically possible, and if so, what code to use.

I've created a quick project to illustrate the problem and I'd be grateful if anyone can help with a solution (or put me out of my misery and tell me why it's not actually possible):

https://www.dropbox.com/s/0nq8fhv5vuxu0x0/YTtest01.c3p?dl=0

Many Thanks,

Steve.

It sounds like you should probably refer to the YouTube player API for iframes.

Thanks Ashley, I've made some progress controlling the YouTube player inside the iFrame object. I'm using C3 buttons to send javascript commands such as:

document.getElementById("myFrame").contentWindow.postMessage('playVideo','*');

window.addEventListener('message', function(event){

	document.getElementById('message').innerHTML = event.data;

	if (event.data == 'pauseVideo') {
		pauseVideo();
	} 

});

runtime.globalVars.playerState = pState; 

I haven't looked in detail at the documentation I linked to, but it appears you aren't doing it the way the documentation advised. For example it looks like you shouldn't be changing any code inside the iframe, that seems to be all managed by YouTube. I'd suggest following the documentation and doing it the way they recommend.