Responsive iframes with jquery.fitframe.js

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="jquery.fitframe.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <div class="iframe-wrap">
      <iframe src="//player.vimeo.com/video/85847275" width="1200" height="675" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
  </div>
</body>

</html>

// Add your javascript here
$(function(){
  $('.container').fitframe({ fitHeight: true });
});

/* Put your css in here */

html,
body {
 height: 100%;
 margin: 0;
}

.container {
  height: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 8em 2em 2em;
}

.iframe-wrap {
  height: 100%;
}

.iframe-wrap:before {
  content: '';
  display: inline-block;
  margin-left: -0.5em;
  height: 100%;
  vertical-align: middle;
}

iframe {
  vertical-align: middle;
  display: inline-block;
  transition: height .2s, width .2s;
}

/*!
 * jQuery fitframe plugin
 * Further changes, comments: @benfosterdev
 * Licensed under the MIT license
 */

 ;(function ( $, window, document, undefined ) {
 
  var pluginName = 'fitframe',
      defaults = {
          fitHeight: false
      },
      ratioKey = 'fitframe-ratio';

  function Fitframe(container, options) {
    this.container = $(container);
    this.options = $.extend({}, defaults, options);

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
  }

  Fitframe.prototype.resize = function() {

    var containerWidth = this.container.width(),
        containerHeight = this.container.height(),
        fitHeight = this.options.fitHeight;

    this.container.find('iframe').each(function() {
      var $e = $(this),
          ratio = $e.data(ratioKey),
          newHeight = containerWidth * ratio;

      if (fitHeight && (newHeight > containerHeight)) {
        // the height overlaps the container so scale the width instead
        $e.height(containerHeight)
          .width(containerHeight / ratio);
      } else {
        // scale the height
        $e.height(containerWidth * ratio)
          .width('100%');
      }
    });
  };  

  Fitframe.prototype.init = function() {

    this.container.find('iframe').each(function() {
      var $e = $(this);
      $e.data(ratioKey, ($e.attr('height') / $e.attr('width')).toPrecision(4));
    });

    var self = this, t;
    // debounced resizing
    window.onresize = function () {
        clearTimeout(t);
        t = setTimeout(function () {
            self.resize();
        }, 100);
    };

    this.resize();
  };

  // A really lightweight plugin wrapper around the constructor
  // preventing against multiple instantiations
  $.fn[pluginName] = function(options) {
    return this.each(function() {
      if (!$.data(this, 'plugin_' + pluginName)) {
        $.data(this, 'plugin_' + pluginName, new Fitframe(this, options));
      }
    });
  }
 
}( jQuery, window, document ));