JSFiddle - React, Tailwind, and code Playground

HTML

<div id='outer'>
    <div id='inner'>
        <iframe src="//www.youtube.com/embed/ngp3wDRl2Ls" frameborder="0" allowfullscreen> Obnoxious Youtube videos are the best. </iframe>
    </div>
</div>

CSS

#outer{
max-width: 640px;
max-height: 360px;
width: 100%;
height: 100%;
}

#inner{
    height: 0px;
padding-bottom: 56.25%;
}

#inner iframe{
    width: 100%;
    height: 100%;
}