Responsive video

JS:

$('.bxslider').bxSlider({
  video: true,
  useCSS: false
});

HTML:

<!-- <script src="/js/plugins/jquery.fitvids.js"></script> must be included in the <head>
after the jQuery library, and before the jquery.bxslider.js file. See the source code
of this page for an example. -->

<ul class="bxslider">
  <li>
    <iframe src="http://player.vimeo.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  </li>
  <li><img src="/images/730_200/houses.jpg" /></li>
</ul>

The file jquery.fitvids.js (found in the plugins folder) must be called AFTER the jQuery library, and BEFORE the jquery.bxslider.js file. An example <head> could look like the following:

<head>
  <!-- other stuff here -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="/js/plugins/jquery.fitvids.js"></script>
  <script src="/js/jquery.bxslider.js"></script>
</head>