FlexSlider 2

Video

JS
HTML

            // Can also be used with $(document).ready()
            $(window).load(function() {
            
              // Vimeo API nonsense
              var player = document.getElementById('player_1');
              $f(player).addEvent('ready', ready);

              function addEvent(element, eventName, callback) {
                if (element.addEventListener) {
                  element.addEventListener(eventName, callback, false)
                } else {
                  element.attachEvent(eventName, callback, false);
                }
              }

              function ready(player_id) {
                var froogaloop = $f(player_id);
                froogaloop.addEvent('play', function(data) {
                  $('.flexslider').flexslider("pause");
                });
                froogaloop.addEvent('pause', function(data) {
                  $('.flexslider').flexslider("play");
                });
              }
            
              
              // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
              $(".flexslider")
                .fitVids()
                .flexslider({
                  animation: "slide",
                  useCSS: false,
                  animationLoop: false,
                  smoothHeight: true,
                  before: function(slider){
                    $f(player).api('pause');
                  }
              });
            });

            <!-- Place somewhere in the <body> of your page -->
            <div class="flexslider">
              <ul class="slides">
                <li>
                  <iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                </li>
                <li>
                  <img src="slide2.jpg" />
                </li>
                <li>
                  <img src="slide3.jpg" />
                </li>
                <li>
                  <img src="slide4.jpg" />
                </li>
              </ul>
            </div>