title: youtube iframe api not pausing video
body: <p>I am currently working on a page with a slider with various iframe youtube embeds.</p>
  
  <p>I am trying to get my JS to pause the video when you hit the "next" button on the slider. I think I've got everything set up according to the api.. but it doesn't seem to pause the videos when you click the slider button.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  // https://developers.google.com/youtube/iframe_api_reference
  
  // global variable for the player
  var player;
  
  // this function gets called when API is ready to use
  
  function onYouTubePlayerAPIReady() {
    // create the global player from the specific iframe (#video)
    player = new YT.Player('video', {
      events: {
        // call this function when player is ready to use
        'onReady': onPlayerReady
      }
    });
  }
  
  function onPlayerReady(event) {
  
    // bind events
  
    var pauseButtonRight = document.getElementByID("pause-right");
    pauseButtonRight.addEventListener("click", function() {
      player.pauseVideo();
    });
     var pauseButtonLeft = document.getElementByID("pause-left");
    pauseButtonLeft.addEventListener("click", function() {
      player.pauseVideo();
    });
  }
  
  // Inject YouTube API script
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  &lt;/script&gt;
  </code></pre>
  
  <p>my iframes:</p>
  
  <pre><code>&lt;iframe src="https://www.youtube.com/embed/6QB6jVjA2js?enablejsapi=1&amp;html5=1&amp;" frameborder="0" allowfullscreen="0"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Any direction would be appreciated.</p>