youtube trying to make 100% width with fixed height container

Change class name on click in jQuery

by ian_smithz

HTML

<iframe width="1280" height="750" src="//www.youtube.com/embed/MmpAXq7sq8s?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>

	<iframe width="960" height="750" src="//www.youtube.com/embed/8neXfLo2f3o?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>

	<iframe width="300" height="420" src="//www.youtube.com/embed/Odo0RcqBVDc?rel=0" frameborder="0" allowfullscreen></iframe>

JavaScript

$(function() {

	// Find all YouTube videos
	var $allVideos = $("iframe[src^='//www.youtube.com']"),

	    // The element that is fluid width
	    $fluidEl = $("body");

	// Figure out and save aspect ratio for each video
	$allVideos.each(function() {

		$(this)
			.data('aspectRatio', this.height / this.width)

			// and remove the hard coded width/height
			.removeAttr('height')
			.removeAttr('width');

	});

	// When the window is resized
	// (You'll probably want to debounce this)
	$(window).resize(function() {

		var newWidth = $fluidEl.width();

		// Resize all videos according to their own aspect ratio
		$allVideos.each(function() {

			var $el = $(this);
			$el
				.width(newWidth)
				.height(newWidth * $el.data('aspectRatio'));

		});

	// Kick off one resize to fix all videos on page load
	}).resize();

});