iframeをレスポンシブ化するCSSです。
youtubeやgoogleマップの埋め込みコードを調整することによく使います。
埋め込みコードをなるべくそのまま使えるように、iframeを囲うタグに幅と高さを設定し、iframeはその大きさに沿うように書いています。

googleマップのレスポンシブ化

<div class="googleMapBox">
 <iframe src="https://www.google.com/maps/embed?pb=hogehoge" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

.googleMapBox{
width: 100%;
height: auto;
aspect-ratio: 5 / 3; //画像の比率はここで修正する
overflow: hidden;
}
.googleMapBox iframe{
width: 100% !important;
height: 100% !important;
}

YouTubeのレスポンシブ化

<div class="youtubeBox">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/hogehoge" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

.youtubeBox{
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
display: block;
}
.youtubeBox iframe{
width: 100% !important;
height: 100% !important;
}