JSFiddle - React, Tailwind, and code Playground

by Jim_Kelleher

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>
    
<div id="content">
    <iframe src="//www.youtube.com/embed/if05nLsUHyk" frameborder="0" allowfullscreen></iframe>
</div>

CSS

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