title: youtube buffering next video while playing current one
body: <p>I have <b>videoIds[youtubeIDs]</b> lined to play youtube videos in mysite which is working fine with the below code.</p>
  
  <p>But when second video starts it lags 1-2 sec to load and the loading youtube icon shows up.</p>
  
  <p>Is there any way to buffer the next video while playing the current video, which will reduce the loading time which results the next video starts instantaneously. </p>
  
  <pre><code>&lt;div id="player"&gt;&lt;/div&gt;
  &amp;lt;script&gt;
  var youtubeIDs=["qdW21vNQB1E","EcVeqY2QuSI","UOV49oGr2pc"];
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;
    function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        playerVars: { 'autoplay': 0, 'controls': 0,'autohide':1,'wmode':'opaque' },
        /*loadPlaylist:{
          listType:'playlist',
          list:youtubeIDs,
          index:parseInt(0),
          suggestedQuality:'small'
       }, */
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }
    function onPlayerReady(event) {
      //event.target.loadPlaylist(youtubeIDs,parseInt(2),15,'large');
      event.target.cuePlaylist(youtubeIDs,parseInt(0),15,'large');
      //event.target.playVideo();
      event.target.playVideoAt(0);
    }
  </code></pre>