title: Youtube API multiple videos with events
body: <p><strong><em>Dear Community!</em></strong></p>
  
  <p>I want to show multiple videos on my website. The speakers should be deactivated by default (i use the mute()-function). </p>
  
  <p>And the videos should start to play automatically when the user scrolls and the videos come into the browser viewport. </p>
  
  <p>I built this with one single video- worked like a charm.  But not with multiple Vidoes on one site.. </p>
  
  <p>please help what do i miss in my Code?</p>
  
  <p>This ist html-Part: </p>
  
  <pre><code>&lt;div class="video-container"&gt;
  &lt;div data-id="olBOo_S5AHY"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="video-container"&gt;
  &lt;div data-id="3IXKIVZ9T-U"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="video-container"&gt;
  &lt;div data-id="LAQDcnwwspQ"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This ist the js-Part:</p>
  
  <pre><code>function onYouTubePlayerAPIReady() {
  
  var players = document.querySelectorAll('.video-container div')
  
  for (var i = 0; i &lt; players.length; i++) {
      new YT.Player(players[i], {
          width: 600,
          height: 400,
          videoId: players[i].dataset.id, 
           events: {
           onReady: initialize
          }
  
  
      });
  }
  }
  
  function initialize(){
  
  players[i].mute(); // I know that players[i] is wrong..
  
  var waypoints = jQuery('.video-container').waypoint(function() {
  
  
      if( players[i]) { // I know that players[i] is wrong..
         var fn = function(){ 
          players[i].playVideo();  // I know that players[i] is wrong..
         }
         setTimeout(fn, 1000);
      }
  
  }, {
    offset: '50%'
  })
  }
  </code></pre>
  
  <p>So the videos show up on my site but i do not have an idea how to add these events to each single video? What am i doing wrong </p>
  
  <p>(a lot i guess ;( ....)</p>
  
  <p>Thank you! </p>
  
  <p>Melanie </p>