JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:block;width:300px;">


<div class="iframe-holder-1">
    <div class="iframe-holder-2">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2677.0815854403827!2d12.126494915639219!3d47.8573831792021!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47761a486c51e8bd%3A0xef7e486be6f81d30!2sKaiserstra%C3%9Fe+10%2C+83022+Rosenheim!5e0!3m2!1sde!2sde!4v1529589680907"></iframe>    
    </div>
</div>
</div>

CSS

.iframe-holder-1
{
    width: 100%;
}

.iframe-holder-2
{
    padding-top: 30%; //4:3
    position: relative;
}

.iframe-holder-2 iframe
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}