How control YouTube player in iFrame?

Post reply
0 favourites
  • 4 posts
From the Asset Store
Player's Follower
$10 USD
Players follower. use it for anything which follows the player
luckyrawatlucky's avatar
luckyrawatlucky

  • 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.

    Tagged:

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

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • 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','*');

    The following code in the iFrame listens for the commands then communicates with the YouTube player. 

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

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

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

});

    I would also like to pass information back to C3, such as the player state and the time elapsed. I thought I could do this by simply creating global variables in C3 and setting their values using the iFrame javascript: 

    runtime.globalVars.playerState = pState;

    However, I get the following console error:

    'Uncaught ReferenceError: runtime is not defined'

    Is it possible to access global variables from the javascript running in the iFrame object?

    Thanks, Steve.

  • 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.

Post reply
  • 4 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)