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>