JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="js-aspect-ratio"></div>
<div class="js-aspect-ratio"></div>
<div class="js-aspect-ratio"></div>
<div class="js-aspect-ratio"></div>

CSS

body{
    margin: 0;
}
div{
    display: block;
    height: 100%;
    width: 100%;
    background: blue;
    margin: 10px;
}

JavaScript

Site.prototype = {
}

function Site(site){
    this.site = site;
}

Site.prototype.aspectRatio = {
	init: function(){
		var parent = this;
		parent.videos = []; 
		parent.findVideos();
		parent.resizeVideos();
	},
	findVideos: function(){
		var parent = this;
		$(".js-aspect-ratio").each(function () {
				parent.videos.push($(this));
		});
	},
	resizeVideos: function(){
		var parent = this;
		for(var i = 0; i < parent.videos.length; i++){
			var element = parent.videos[i];
			var parentElement = element.parent();
			element.css({"height": "", "width": ""});
      var h = parentElement.height();
      var w = parentElement.width();
			var base;
			if(w/16 > h/9){
				base = w/16;
			} else {
				base = h/9;
			}
			element.css({"height": (base*9)+"px", "width": (base*16)+"px"});
		}
	}
};

var theCharles = new Site($(window));

theCharles.aspectRatio.init();

theCharles.site.resize(function(){
    theCharles.aspectRatio.resizeVideos();
});