CODEWITHSUNDEEP
apivideoyoutube-api
Edmond Tamas
Edmond Tamas

Reputation: 3305

Having multiple youtube API players?

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

  }

Upvotes: 0

Views: 2167

Answers (1)

Asherlc
Asherlc

Reputation: 1161

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.

Upvotes: 1

Related Questions