JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<iframe src="//player.vimeo.com/video/106337514?title=0&amp;byline=0&amp;portrait=0&amp;color=9ee4e8" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen resize-enabled class="video"></iframe> <p><a href="http://vimeo.com/106337514">Sri Lanka - Resplendent Island</a> from <a href="http://vimeo.com/jordipages">Jordi Pages</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

JavaScript

var videoAspect = function(elements){
	var videos = elements;
	elements.each(function(){
		var video = $(this);
		var videoWidth = video.width();
		var videoHeight = (videoWidth/16)*9;
		video.css("height", videoHeight);
	});
};

var videoResize = $("iframe[resize-enabled]");

videoAspect(videoResize);

$(window).resize(function() {
	videoAspect($(videoResize));
});