title: Youtube iframes in Bootstrap Carousel - stop video on slide
body: <p>I have a bunch of Carousels on a page, each with a mix of videos and images.  I'd like to stop  Youtube videos from playing when the user exits a video by clicking one of the carousel controls (left or right).  </p>
  
  <p>I'd like to be able to detect when the user clicks the controls, create a player based on the current video that was playing, and turn that video off.  In the other examples I've seen, the players were declared in the onYoutubeIframeAPIReady function, but I thought it would be better not to dynamically create players for every video on the page.  Right now, I'm getting the error</p>
  
  <pre><code>Uncaught TypeError: Object #&lt;T&gt; has no method 'stopVideo' 
  </code></pre>
  
  <p>when I click the carousel controls.  However, if I type</p>
  
  <pre><code>player.stopVideo();
  </code></pre>
  
  <p>in the Chrome javascript console, it works fine.  What am I doing wrong?</p>
  
  <pre><code>  &lt;script&gt;
    var youtubeReady = false;
  
    function onYouTubeIframeAPIReady(){
      youtubeReady = true;
    }
  
    $('.carousel').on('slide', function(){
      if(youtubeReady){
        console.log("setting player");
        var iframeID = $(this).find('.active').find('iframe').attr("id");
        player = new YT.Player(iframeID); 
        player.stopVideo(); 
      }
    });
    &lt;/script&gt;
  </code></pre>
  
  <p>Example carousel:</p>
  
  <pre><code>&lt;div class="mainPhoto carousel slide 523" id="carousel-523"&gt;
            &lt;div class="carousel-inner 523"&gt;
            &lt;div class="item active"&gt;
               &lt;div class="flex-video"&gt;
                   &lt;a class="fancybox" href="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&amp;amp;enablejsapi=1" rel="gallery 523" data-fancybox-type="iframe"&gt;
                       &lt;iframe src="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&amp;amp;enablejsapi=1" id="1188"&gt;
                       &lt;/iframe&gt;
                   &lt;/a&gt;
               &lt;/div&gt;
           &lt;/div&gt;
          &lt;div class="item"&gt;
               &lt;a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/2013-07-05_19.47.55.jpg" rel="gallery 523" data-fancybox-type="image"&gt;
                   &lt;img alt="Preview_2013-07-05_19.47.55" id="1189" src="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/preview_2013-07-05_19.47.55.jpg" width="100%"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
              &lt;a class="carousel-control left" href="#carousel-523" data-slide="prev" style="display: none;"&gt;‹&lt;/a&gt;
              &lt;a class="carousel-control right" href="#carousel-523" data-slide="next" style="display: none;"&gt;›&lt;/a&gt;
          &lt;/div&gt;
  </code></pre>