jquery.fitstuff.js

/*
 * Variation of fitvids.js I wrote to behave the way I want to.
 */
(function($){

	$.fitStuff = function (el, options) {
		var base = this;
		base.$el = $(el);
		base.selectors = [
		    "iframe[src^='http://player.vimeo.com']", 
		    "iframe[src^='http://www.youtube.com']", 
		    "iframe[src^='http://www.kickstarter.com']",
		    // "iframe[src^='http://blip.tv']",
		    "iframe[src^='http://www.slideshare.net']",
		    "iframe[src^='http://rd.io/i']"
			// "object",
			// "embed"
		];
		base.ratioKey = 'fitStuffRatio';
		base.timeoutTime = 250;

		base.init = function () {
			base.options = $.extend({},$.fitStuff.defaultOptions, options);
			if (base.options.customSelector) {
				base.selectors.push(customSelector);
			}
			base.$children = base.$el.find(base.selectors.join(','));
			base.$children.each(function(){
				var w = $(this).attr('width') || $(this).width(),
					h = $(this).attr('height') || $(this).height();
				$(this).data(base.ratioKey, h / w);
			});
			if (base.options.sizeUp) {
				base.$children.css('width', '100%');
			}
			base.resizeChildren();
			$(window).resize(base.resizeEvent);
		};

		base.resizeEvent = function () {
			if (base.timeout) {
				clearTimeout(base.timeout);
			}
			base.timeout = setTimeout(base.resizeChildren, base.timeoutTime);
		}

		base.resizeChildren = function () {
			base.$children.each(base.resizeChild);
		};

		base.resizeChild = function () {
			var ratio = $(this).data(base.ratioKey),
				w = $(this).width(),
				h = $(this).height();
			if (ratio != h / w) {
				$(this).css('height', (ratio * w) + 'px');
			}
		}

		base.init();
	}

	$.fitStuff.defaultOptions = {
	    sizeUp: true
	};

	$.fn.fitStuff = function (options) {
	    return this.each(function(){
	        (new $.fitStuff(this, options));
	    });
	};

})(jQuery);