title: Pause Bootstrap Carousel when playing Vimeo video
body: <p>I have a simple Bootstrap Carousel which includes a video.</p>
  
  <p>Here is my Demo: <a href="http://jsfiddle.net/Q2TYv/2053/" rel="nofollow">http://jsfiddle.net/Q2TYv/2053/</a></p>
  
  <p><strong>Is it possible I can pause the slider when I click 'Play' on the video?</strong> Currently when I click <code>Play</code> it still autoplays through the rest of the carousel items.**</p>
  
  <p>Thanks for any advice.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// invoke the carousel
  $('#myCarousel').carousel({
    interval: 3000
  });
  
  /* SLIDE ON CLICK */ 
  
  $('.carousel-linked-nav &gt; li &gt; a').click(function() {
  
      // grab href, remove pound sign, convert to number
      var item = Number($(this).attr('href').substring(1));
  
      // slide to number -1 (account for zero indexing)
      $('#myCarousel').carousel(item - 1);
  
      // remove current active class
      $('.carousel-linked-nav .active').removeClass('active');
  
      // add active class to just clicked on item
      $(this).parent().addClass('active');
  
      // don't follow the link
      return false;
  });
  
  /* AUTOPLAY NAV HIGHLIGHT */
  
  // bind 'slid' function
  $('#myCarousel').bind('slid', function() {
  
      // remove active class
      $('.carousel-linked-nav .active').removeClass('active');
  
      // get index of currently active item
      var idx = $('#myCarousel .item.active').index();
  
      // select currently active item and add active class
      $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');
  
  #myCarousel {
    margin-top: 40px;
  }
  
  .carousel-linked-nav,
  .item img {
    display: block; 
    margin: 0 auto;
  }
  
  .carousel-linked-nav {
    width: 120px;
    margin-bottom: 20px;   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;!-- Carousel items --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="active item"&gt;
          &lt;img src="http://placehold.it/300x200/444&amp;text=Item 1" /&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;iframe src="https://player.vimeo.com/video/124400795"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;img src="http://placehold.it/300x200/444&amp;text=Item 3" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Carousel nav --&gt;
    &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
    &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- LINKED NAV --&gt;
  &lt;ol class="carousel-linked-nav pagination"&gt;
    &lt;li class="active"&gt;&lt;a href="#1"&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#2"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#3"&gt;3&lt;/a&gt;&lt;/li&gt;
  &lt;/ol&gt;</code></pre>
  </div>
  </div>
  </p>