title: Multiple Instances of YouTube Player API on a Single Page
body: <p>I've spent the day banging my head on this. I've made some good progress, but this last part has me stuck. </p>
  
  <p>I'm using YouTube's API. I have a listener event configured, and the video autoplays, and autocloses on completion. All of that works great. </p>
  
  <p>What I want to do is have more than one video on a single page (5, actually) assigned by DIV. Is there a way to do that with this code? </p>
  
  <pre><code>    // create youtube player
      var player;
      function onYouTubePlayerAPIReady() {
          player = new YT.Player('player', {
            height: '488',
            width: '800',
            videoId: '49QKXdRTX-A',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
      }
  
      // autoplay video
      function onPlayerReady(event) {
          event.target.playVideo();
      }
  
      // when video ends
      function onPlayerStateChange(event) {    
  if(event.data === 0) {
      $("#player").hide();          
          }    
      }
  </code></pre>
  
  <p>Additionally, it's worth mentioning that I will have a couple of these videos auto-show another DIV on completion, so something like this:</p>
  
  <pre><code>function onPlayerStateChange(event) {    
  if(event.data === 0) {
  $("#player").hide();
  $("#gallery-main").show();
  </code></pre>
  
  <p>ANY help would be greatly appreciated. Thanks!</p>