JSFiddle - React, Tailwind, and code Playground

HTML

<iframe src="//www.youtube.com/embed/VVKVvoe2P2A?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen="allowfullscreen" width="853" height="480"></iframe>

CSS

.videoWrapper {
	position: relative;
	padding-top: 25px;
	height: 0;
    background: #FF00FF;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

JavaScript

$(document).ready(function() {
	var $allVideos = $('iframe[src*="player.vimeo.com"], iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"], iframe[src*="kickstarter.com"][src*="video.html"], object, embed');
    
    $allVideos.each(function() {
        var aspectRatio = (this.height / this.width) * 100;
        $(this).wrap("<div class='videoWrapper' style='padding-bottom: "+aspectRatio+"%;'></div>").attr('data-aspectRatio', aspectRatio).attr('style', 'max-width:'+this.width+'px; max-height:'+this.height+'px;').removeAttr('width').removeAttr('height');
	});
});