Cacher is the code snippet organizer for pro developers

// Make video iframes fluid
// by github.com/davesmiths
// Uses the iframe width and height attributes to determine the iframe ratio
// Adds a width of 100%
// Adds a max-width of the iframe width in px if no CSS width has already been applied
// Calculates the height and applies in px
// Uses window.onresize to redraw accordingly
// window.resize throttled to prevent too many calls
$(function() {
	
	'use strict';
	
	var $videos = $('iframe[src^="//www.youtube.com"]')
		,timeoutID
		,run
	;
	
	$videos.each(function() {
		
		var $this = $(this)
			,widthAttVal = $this.attr('width')
			,heightAttVal = $this.attr('height')
			,width = $this.width()
		;
		if (width === widthAttVal) {
			// Assume no CSS has been applied and apply a max-width to maintain current video size rather than force width 100%
			$this.css('max-width', widthAttVal + 'px');
		}
		$this.data('ratio', widthAttVal / heightAttVal).css({width:'100%'});
		
	});
	
	run = function() {
		$videos.each(function() {
			var $this = $(this)
				,outerWidth = $this.outerWidth()
				,ratio = $this.data('ratio')
			;
			
			$this.css('height', outerWidth / ratio + 'px');
			
		});
	};
	
	// Add window resize event and buffer the calls to prevent a potential overflow of calls to runEachVectorOf
	$(window).on('resize', function() {
		clearTimeout(timeoutID);
		timeoutID = setTimeout(function() {
			run();
		}, 200);
	}).resize();
	
});