I want to have control over YouTube players that use iframes. I want to control these players using the JavaScript API even though they will already be in HTML.
I've been reading the iframe API documentation, which explains how to use the API to add a new video to the page and then use the YouTube player capabilities to control it:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('container', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
This code generates a fresh player object, assigns it to the variable "player," and then puts it into the #container div. After that, I may manipulate 'player' by calling functions like playVideo() and pauseVideo().
However, I need to be able to interact with the iframe players that are already there on the page.
With the previous embed method, I could accomplish this extremely quickly by using something like:
player = getElementById('whateverID');
player.playVideo();
However, the new iframes prevent this from working. How can I assign an existing iframe object on the page so that I can use the API operations on it later?