Youtube動画埋め込み時の縦横比を維持するCSSを書きたい

Question

前提・実現したいこと

WordPress初心者です。
現在エビスコム著のWordPressレッスンブック5.x対応版という本で学習をしているのですが、制作物がまったく本の通りにならず、さらにはYoutubeの動画を埋め込んで表示させる際に、widthを100%表示させようとするとheightが半分以下にカットされたり見えなくなってしまいます。

アスペクト比をそのままに、レスポンシブ対応で表示したいです。

なお、オリジナルテーマ作成のため、現状style.cssの記述途中でWordPressビジュアルエディターとの差異があります。
詳しくは添付画像をご覧ください。
ブラウザ表示している方は検証モードで該当部分のHTMLを表示しています。

発生している問題・エラーメッセージ

埋め込み動画のCSSを記述するとブラウザの方で動画部分が見えなくなる。
CSSを記述していない状態では、動画の固定サイズが記述され、横幅いっぱいにならない。

試したこと

iframeに対して、style.cssで以下のように記述してみた。すると動画部分が見えなくなってしまった。

iframe{
	position: absolute;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

補足情報

WordPressのバージョンは5.5.1
こういったグーテンベルグエディターからの埋め込みといった部分に対して自動で指定したdivで囲んでくれるような仕組みを知りたいです。（phpの関数などで実現できる？）

Answer 1

解決しました。
function.phpのmytheme_setup関数に

    add_theme_support( 'responsive-embeds' );

を記述しました。