JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sizing-wrapper">
    <div class="responsive-wrapper">
        <div>Some iframe</div>
    </div>
</div>

CSS

.responsive-wrapper {
    width:100%;
    padding-bottom:37.5%;
    position:relative;
}

.responsive-wrapper > div {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#CCC;
}

.sizing-wrapper {
    max-width:800px
}