YouTube動画の埋め込みで縦横比が崩れる問題は、
CSSの「aspect-ratio」を使えば一発で解決できます。

ブログやホームページにYoutube動画を埋め込む際に
Youtubeで埋め込みコードをコピペすると
サイズが小さかったり、でかすぎたり、
左寄せで見栄えが悪かったり。

そこで、縦横サイズを変えてみても
スマホでは見栄えが悪かったり・・・

さらには、縦横のサイズを入れると
比率がおかしかったり・・・

そこで、横１００％、縦を空欄にして
比率を維持させようと思うも
それでは比率が合わず、縦が短すぎたり・・・

そんな経験された方も多いのではないでしょうか？

YouTubeの埋め込みコードには、
固定サイズ（width・height）が指定されているため、
そのまま使うと画面サイズによって比率が崩れてしまいます。

YouTube動画の埋め込みで縦横比が崩れる問題は、
CSSの「aspect-ratio」を使えば一発で解決できます。

以下のコードを追加するだけで、
PC・スマホ・タブレットすべてで16:9の比率が維持されます。

まずは以下のコードだけ使えばOKです。

.youtube-wrap iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* アスペクト比を16:9に設定 */
}

※ aspect-ratioは主要ブラウザ（Chrome・Safari・Edge）で対応しています。
※ iframe全体に影響させたくない場合は、必ずクラス指定で使用してください。

<div class="youtube-wrap">
  <iframe src="https://www.youtube.com/embed/動画ID" allowfullscreen></iframe>
</div>

例えば横幅を100％にせず中央寄せにしたい場合は、
CSSを以下のように調整します。

.youtube-wrap {
  max-width: 800px;
  margin: 0 auto;
}

ちなみにもし、うまく反映されない場合は、
キャッシュの影響やCSSの優先順位が原因の可能性があります。
その場合はブラウザの更新やキャッシュ削除を試してみてください。

是非、お試しください。