.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
<div class="map-responsive">
<iframe src="...." width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
Ну 56.25%, если не ошибаюсь - это ютубовские пропорции 6:9, частный случай.
Тут я так понял, задача несколько другая, более обобщенная.