基本のHTML

基本のHTMLは以下です。
任意のYouTube埋め込みコードをdiv要素で囲んでいます。
div要素は縦横比を保つための要素です。

HTML
コピー
<div class="youtube_wrap">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/JHLY-NzJnjU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

このHTMLにCSSをあてていきます。

縦横比を保つCSS

padding-topを利用して縦横比を保つCSSは以下になります。

CSS
コピー
.youtube_wrap{
    padding-top: 56.25%;
    width: 100%;
    position: relative;
}

.youtube_wrap iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

CSSの解説

padding-topを利用して縦横比を保つCSSの解説をします。

なぜ、padding-top: 56.25%;を指定しているか?

まず知っておいて欲しいことが2つあります。

• ・padding-top: 100%;はwidth: 100%;と同じ幅である。
• ・YouTubeのアスペクト比は16:9である。

YouTubeに合わせてアスペクト比を16:9にすると、widthが100%(16)の場合padding-topが56.25%(9)になるというわけです。

aspect-ratioとは？

2021年1月19日にChrome 88リリースされ、CSSのaspect-ratioプロパティがサポートされました。
aspect-ratioプロパティは、ボックスや動画、画像のアスペクト比を指定することができます。

ブラウザサポート状況(21.05.16時点)

aspect-ratioプロパティのサポート状況はというとまだリリースされたばかりなのでサポートしているブラウザは少ないです。
これから徐々にサポートされていくと思われます。

最新のサポート状況はこちら
https://caniuse.com/?search=aspect-ratio

基本のHTML

基本のHTMLは以下です。
任意のYouTube埋め込みコードをコピペしてくるだけです。

HTML
コピー
<iframe class="youtube_ifreme" width="560" height="315" src="https://www.youtube.com/embed/JHLY-NzJnjU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

このHTMLにCSSをあてていきます。

縦横比を保つCSS

aspect-ratioを利用して縦横比を保つCSSは以下になります。

CSS
コピー
.youtube_ifreme{
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

aspect-ratioプロパティがサポートされていないブラウザでは正しく表示されません。

CSSの解説

padding-topを使う方法よりもHTMLとCSSがシンプルですね。

YouTubeの埋め込みタグのaspect-ratioを指定します。
YouTubeのアスペクト比は16:9なのでaspect-ratio: 16 / 9;と指定します。

あとは、widthを任意の値で指定し、heightをautoに指定してあげます。
そうするとアスペクト比を16:9に保ったままレスポンシブになってくれます。