Sets an iframe to the correct height in situations in which it's been resized to fit a browser window.

make-video-correct-height.js

/**
 * @function resize_video
 * @param {string} selector - the selector for the video iframe to resize.
 * @returns {jQuery object} - the video node
 * @requires jQuery
 * @description this function takes a selector for an iframe 
 * and resizes it to have a height that's appropriate for how the video is currently scaled.
 * This is primarily useful in situations in which you've embedded a video from Youtube
 * or Vimeo but it's getting black bars around it on some mobile devices because the video
 * is being scaled down but it still has a fixed height on the iframe. This script assumes
 * that you have jQuery available and that the embedded iframe has a `height` and 
 * `width` property set. This script could be replaced by CSS in situations in which you
 * don't care about the black bars, or in cases where all of your videos have a fixed ratio
 * such that you can reliably calculate the height.
 */
function resize_video (selector) {
  var $embed = $(selector);
  var original_frame_width = $embed.attr('width');
  var original_frame_height = $embed.attr('height');
  var current_frame_width = $embed.width();
  var current_scale = current_frame_width / original_frame_width;
  $embed.height(original_frame_height * current_scale + 'px');
  $embed.css('min-height', original_frame_height * current_scale + 'px');
}