Carousels are a great way to share a lot of similarly weighted content in one block — saving previous page real estate. Carousels with video can be even more captivating. But if you want to add video to a carousel that automatically cycles you may find that Mr. Carousel doesn’t care that Mr. Vimeo is playing and will cycle on to the next slide.

So how do we fix that? Enter Froogaloop outlined on Vimeo’s developer page.

1. Include Froogaloop with:

   <script src="http://a.vimeocdn.com/js/froogaloop2.min.js">

2. Embed video. You’ll want to add an id to the iframe embed code and then add ‘?api=1&player_id=<IFRAME_ID> to the iframe src so it looks something like this:

   <iframe src="http://player.vimeo.com/video/10730217?api=1&player_id=player1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

3. When the document is ready find the iframe video element and add event listeners with:

   $(document).ready(function(){
     var iframe = $('#player1')[0],
       player = $f(iframe),
       status = $('.status');
   
     player.addEvent('ready', function() {
       player.addEvent('play', onPlay);
       player.addEvent('finish', onFinish);
     });
   });

4. Stop or start the carousel (I’m using Twitter Bootstrap’s) with:

   function onPlay(id) {
     $('.carousel').carousel('pause');
   }
   
   function onFinish(id) {
     $('.carousel').carousel('cycle');
   }