JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stretchy-wrapper">
        <div>
            <img src="http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg" style="overflow: hidden; width:100%;"/>
        </div>
    </div>

CSS

body {
	width: 70%;
	margin: 8px auto;
}

div.stretchy-wrapper{
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
	background: blue;
    overflow: hidden;
}

div.stretchy-wrapper > div {
	position: absolute;
	top: -16.75%; bottom: 0; left: 0; right: 0;
}