Having multiple youtube API players? - api

Question

I try to have more then 5 youtube video players, but after creating the second I run in some problems.
As I create the second, the first disappears, and can't figure out what's wrong.
Would really appreciate some help
Thanks!
//slide 2
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '820',
width: '707',
videoId: 'NTq1WLKuOI4',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
setTimeout(function(){player.playVideo(); },8000);
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 29000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
slide2();
move();
}
var slide2 = function(){
setTimeout(function(){
slide3();
move();
},9000);
}
//slide3
var player;
function onYouTubeIframeAPIReady() {
player2 = new YT.Player('player2', {
height: '820',
width: '707',
videoId: 'AQx1UjLv3Ps',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
setTimeout(function(){player2.playVideo(); },8000);
}
// 5. The API calls this function when the player's state changes.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo2, 29000);
done = true;
}
}
function stopVideo2() {
player2.stopVideo();
}

Answer 1

You can't call onYouTubeIframeAPIReady() more than once. You need to initialize all your players in one onYouTubeIframeAPIReady call. Try wrapping the contents of your onYouTubeIframeAPIReady's in new named functions, and then call them all within onYouTubeIframeAPIReady.