Having multiple youtube API players?

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();

  }

Figured it out - [solution](http://stackoverflow.com/questions/17012886/loading-multiple-video-players-with-youtube-api) — Edmond Tamas, Jul 03 '13 at 04:25
possible duplicate of [Second video keeps looping, after is being called on the firsts end - youtube API?](http://stackoverflow.com/questions/17441532/second-video-keeps-looping-after-is-being-called-on-the-firsts-end-youtube-ap) — Jeff Posnick, Jul 09 '13 at 16:45

score 1 · Answer 1 · answered Jul 12 '13 at 19:48

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.

Having multiple youtube API players?

1 Answers1