JSFiddle - React, Tailwind, and code Playground

HTML

<div class="media">
    <iframe class="frame" width="100px" height="10px"></iframe>
</div>
<div class="media2">
    <iframe class="frame" width="100px" height="10px"></iframe>
</div>
<div class="media3">
    <iframe class="frame" width="10px" height="100px"></iframe>
</div>
<div class="media4">
    <iframe class="frame" width="100%" height="100%"></iframe>
</div>

CSS

div {
    margin: 10px;
}
.media {
    height: 300px;
    width: 100%;
    background-color: green;
}
.media2 {
    height: 100px;
    width: 300px;
    background-color: yellow;
}
.media3 {
    height: 100px;
    width: 300px;
    background-color: cyan;
}
.media4 {
    height: 300px;
    width: 200px;
    background-color: cyan;
}

JavaScript

jQuery.fn.fitToParent = function () {
    this.each(function () {
        var $iframe = jQuery(this);
        var width = $iframe.width();
        var height = $iframe.height();
        var parentWidth = $iframe.parent().width();
        var parentHeight = $iframe.parent().height();

        var aspect = width / height;
        var parentAspect = parentWidth / parentHeight;

        if (aspect > parentAspect) {
            newWidth = parentWidth;
            newHeight = newWidth / aspect;
        } else {
            newHeight = parentHeight;
            newWidth = newHeight * aspect;
        }
        $iframe.width(newWidth);
        $iframe.height(newHeight);
    });
};

$('.frame').fitToParent();

$(window).resize(function () {
    $('.frame').fitToParent();
});