title: Create a random youtube video player
body: <p>I want to create a youtube video player that rearranges an array of videos each time the webpage is accessed, and then plays them in that that arranged order.</p>
  
  <p>So far my code is able to pick a random video from the array play it, then randomly pick another video and play it.</p>
  
  <p>The issue with this is that the videos overlap. When it randomises the array I want all of them to play in sequence: like 3,2,1 or 2,1,3 or 3,1,2. With no repeats.</p>
  
  <p>At the moment it will play any video of the 3 any number of times.</p>
  
  <p>This function will shuffle the array each time the page is accessed, this section works.</p>
  
  <pre><code>function shuffle(array) {
          var currentIndex = array.length, temporaryValue, randomIndex;
  
          // While there remain elements to shuffle...
          while (0 !== currentIndex) {
  
            // Pick a remaining element...
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
  
            // And swap it with the current element.
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
          }
  
          return array;
        }
  </code></pre>
  
  <p>This is code adapted from <a href="https://developers.google.com/youtube/iframe_api_reference" rel="nofollow">https://developers.google.com/youtube/iframe_api_reference</a></p>
  
  <pre><code>  // 1. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
  
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
    // 2. This function creates an &lt;iframe&gt; (and YouTube player)
    //    after the API code downloads.
    var player;
    var list = ['rgAYRbeO9GI','6wKxfH9NpVE','OJ9qLosjjH8']
    shuffle(list); // shuffles the array
  
  
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '585',
        width: '960',
        // videoId: list[Math.floor(Math.random() * list.length)],
        videoId: list[0], // accesses the first index of the newly sorted list array, Ideally I want to play the next video
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }
  
    // 3. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
      event.target.playVideo();
    }
  
    // 4. 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.ENDED &amp;&amp; !done) { // once the video is finished the onPlayerReady() function repeats.
        onPlayerReady();
        done = true;
      }
    }
  </code></pre>
  
  <p>I need a way to move form the list[0] index to the next, I'm not sure where to put the loop. Any ideas?</p>