title: Multiple YouTube embed videos with custom play button
body: <p>I’m trying have more than one YouTube embed video on the page, each of which has it’s own overlay and play button that when clicked hides the relevant overlay and plays video.</p>
  
  <p>I can make it work for a single video, but when I try and add more in and loop over the videos, the onPlayerReady function doesn't seem to be getting called. </p>
  
  <p><a href="https://codepen.io/anon/pen/mqeZgX" rel="nofollow noreferrer">https://codepen.io/anon/pen/mqeZgX</a></p>
  
  <p>Here's my javascript</p>
  
  <pre><code>// Inject YouTube API script
  const tag = document.createElement('script');
  tag.src = '//www.youtube.com/player_api';
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  const players = document.querySelectorAll('.js-video-embed &gt; iframe');
  const playButtons = document.querySelectorAll('.video__button');
  const overlays = document.querySelectorAll('.video__overlay');
  
  window.onYouTubePlayerAPIReady = () =&gt; {
    for (var i = 0; i &lt; players.length; i++) {
      new YT.Player(players[i], {
        events: {
          'onReady': onPlayerReady
        },
      });
    }
  };
  
  function onPlayerReady() {
    for (var i = 0; i &lt; players.length; i++) {
      // bind events
      playButtons[i].addEventListener('click', () =&gt; {
        players[i].playVideo();
        overlays[i].style.display = 'none';
      });
    }
  }
  </code></pre>
  
  <p>Thanks in advance for any pointers you may be able to give!</p>