title: Pausing YouTube iFrame API in JavaScript
body: <p>I have a Youtube video embedded in a slideshow that I would like to pause when the user clicks on an <code>img</code> thumbnail:</p>
  
  <pre><code>&lt;li&gt;&lt;iframe width="430" height="241" src="http://www.youtube.com/watch?v=XjUz8IT0CYg?enablejsapi=1&amp;theme=light&amp;showinfo=0" frameborder="0" allowfullscreen id="my-video"&gt;&lt;/iframe&gt;&lt;/li&gt;
  </code></pre>
  
  <p>I've been over the Youtube API but I'm confused how to get things started.</p>
  
  <p>Does the API JS load automatically when I append <code>?enablejsapi</code> to the end of the YouTube <code>video id</code>?</p>
  
  <p>Here is my JS:</p>
  
  <pre><code>var player1 = document.getElementById('my-video');
  
  $('img').click(function () {
    player1.pauseVideo();
  })
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here's what I did based on Matt's answer below, for anyone wondering:</p>
  
  <pre><code>&lt;li&gt;&lt;iframe width="430" height="241" src="http://www.youtube.com/embed/XjUz8IT0CYg?enablejsapi=1&amp;theme=light&amp;showinfo=0" frameborder="0" allowfullscreen id="player-1"&gt;&lt;/iframe&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;iframe width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&amp;theme=light&amp;showinfo=0" frameborder="0" allowfullscreen id="player-2"&gt;&lt;/iframe&gt;&lt;/li&gt;
  </code></pre>
  
  <p>And then my JS:</p>
  
  <pre><code>var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  // Create YouTube player(s) after the API code downloads.
  var player1;
  var player2;
  
  function onYouTubeIframeAPIReady() {
      player1 = new YT.Player('player-1');
      player2 = new YT.Player('player-2');
  }
  </code></pre>
  
  <p>Then in <code>document.ready</code>:</p>
  
  <pre><code>$(document).ready(function () {
      $(".slideshow-1 img").click(function () {
          player1.stopVideo();
      });
  
      $(".slideshow-2 img").click(function () {
          player2.stopVideo();
      });
  }
  </code></pre>