cssでiframeで埋めた動画の比率をかえたくない

Question

iframeを使って挿画を埋め込みました。
ブラウザを縮小すると画像が大きいままはみ出します。
どうしたら比率を変えずに真ん中に縮小できますか？

html-------------------------------------------------------------

<div class="back1"> <iframe width="500" height="300" src="https://www.youtube.com/embed/iMEnYCB5omg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>

css-------------------------------------------------------------

.back1{background-image:url("../images/unnamed.jpg");
background-size:800px 690px;

}

.back1 iframe{
display: block;
margin: 0 auto;
padding: 20% 0%;

}

このように設定しています。

Answer 1

「iframe アスペクト比」でググったところ、以下の記事が1位でした。

iframe レスポンシブ　アスペクト比を保ちながら縦横を伸縮させたい

参考になる記事だと思いますので、ご参照されてはいかがでしょうか。