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

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

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

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

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

この問題は、
CSSで一発で解決します。

PCでもスマホでもタブレットでも
この比率が維持されますので、
手間がかからず便利です。

そのコードはこちら。

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

是非、お試しください。