### 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>