youtube trying to make 100% width with fixed height container

by ian_smithz

HTML

<div class="iframe-container">

	<iframe width="100%" height="200" src="https://www.youtube.com/embed/wz3V80uKl_E?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;&playlist=wz3V80uKl_E" frameborder="0" allowfullscreen></iframe>

</div>

  <!--
  
  	<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>
  
  -->

CSS

.iframe-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

iframe {
  min-height: 400px;
}

JavaScript

$(function() {

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

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

	// 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');

	});

	$(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();

});