JSFiddle - React, Tailwind, and code Playground

HTML

<div>
     <h2>About the ratio</h2>

    <p>Naturally, the video is 560px wide and 315px high.</p>
    <p>We want it to be Xvw wide and we want the height to scale according to the 560/315 (16/9) ratio.</p>
    <p>Using the css calc function, we can make that happen (example with X = 70).</p>
    <p> Don't forget to scale the container too! </p>
</div>

<h2> Example</h2>
<p> Whatever the size of the browser, this video will keep a  16/9 ratio and it's width will be 70% of the viewport's width.
<div id="content">
    <iframe src="//www.youtube.com/embed/if05nLsUHyk" frameborder="0" allowfullscreen></iframe>
</div>

CSS

#content {
    width: 70vw;
    margin:auto;
}
#content iframe {
    width: 70vw;
    height:calc((9/16)*70vw);
}