JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stretchy-wrapper">
        <iframe id="resize" src="http://www.w3schools.com/" width="100%" height="100%"></iframe>
</div>

CSS

body {
    width: 75%;
    height: 75%;
    margin: 8px auto;
}
div.stretchy-wrapper {
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%%;
    /* 16:9 56.25% */
    position: relative;
}
div.stretchy-wrapper > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    font-size: 24px;
}
iframe {
    -webkit-transform:scale(0.8);
    -moz-transform-scale(0.8);
    -o-transform: scale(0.8);
    -ms-zoom: 0.8;
}