HTML

YouTube 動画埋め込みのレスポンシブ対応方法

YouTube 動画埋め込みのレスポンシブ対応方法

YouTube 動画の埋め込みを CSS でレスポンシブ対応する方法を紹介します。
padding-top ハックを使った方法と、新プロパティの aspect-ratio を使った方法を紹介します。

  1. 動画の埋め込みをレスポンシブ対応する方法
    1. padding-top ハックを使った方法
    2. aspect-ratio を使った方法

動画の埋め込みをレスポンシブ対応する方法

まずは YouTube からコピーした「動画の埋め込みのコード(iframe)」をブロック要素(<div class="youtube">〜</div>)で囲みます。

<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/cKf4cqx3MXQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

padding-top ハックを使った方法

レスポンシブ対応をするには、アスペクト比を保って拡大縮小に対応する必要があります。
横幅に対して高さの比率を維持するには padding-top ハックで対応するのが簡単です。
最初に紹介したサンプルコードの「ブロック要素」と「動画の埋め込みコード」に対して、次の CSS を指定します。

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

まずは、アスペクト比を指定した空っぽの箱(ブロック要素 <div class="youtube">〜)を用意します。
YouTube 動画のアスペクト比はデフォルトで 16:9 なので、横幅は width: 100%; 、高さは padding-top: 56.25%; (16 を 100% とした時の 9 の値 56.25%)を指定。
padding の特性として、pading-top 100% は、width の100% と同じ値になる特性があります。これを使ってアスペクト比率を保ちます。

次に iframe の指定。ここで作った空っぽの箱に iframe を記述するわけですが、そのまま入れると padding せいで iframe が箱の外に弾かれるため、iframe に position: absolute; を指定して箱の内側に iframe を収めます。親要素に position: relative; の指定を忘れないように。
指定がうまくゆけば下の動画のように、レスポンシブに対応したYouTubeの埋め込み動画が完成します。

aspect-ratio を使った方法

続いて紹介する方法は、新しくサポートされるプロパティ aspect-ratio を使った方法です。
最初に紹介したサンプルコードの「ブロック要素」と「動画の埋め込みコード」に対して、次の CSS を指定します。
※aspect-ratio のブラウザー対応状況は、記事後半で補足しています。

.youtube {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube iframe {
width: 100%;
height: 100%;
}

aspect-ratio は、保ちたいアスペクト比の値を指定することで、簡単に比率を保った状態を維持することができます。
今回はYoutube動画の比率 16:9 を「16 / 9」として指定します。

一部のブラウザーでは aspect-ratio プロパティは未対応ですが、対応が進めば padding-top ハックを使用した方法よりも直感的にアスペクト比対応が行えるため、指定方法を覚えておきましょう。
※2021年秋頃には Safari 15 でも対応予定とのことです。(2021年6月8日追記)
※2021年現在、Chrome 88 以降の環境でしか対応していませんが、今後は他のブラウザーでも使用できるようです。

現状の対応状況はこちらからご確認ください。

まとめ

YouTube 動画の埋め込みを CSS でレスポンシブ対応する方法を紹介しました。
新プロパティの aspect-ratio は他の場面でも使う機会があるので覚えておきましょう。