YouTube 動画埋め込みのレスポンシブ対応方法
最終更新日 - 公開日 2019.12.13
by
YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。
埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。
また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。
動画の埋め込みをレスポンシブ対応する方法
まずは 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>
ここでは説明をするために囲み要素（div.youtube）を使用していますが、環境に合わせて記述位置は任意で調整してください。
aspect-ratio を使った方法
レスポンシブ対応をするには、アスペクト比を保って拡大縮小に対応する必要があります。
最初に紹介する方法は、プロパティ aspect-ratio を使った方法です。
aspect-ratio は、2021年の中頃に主要なブラウザーでサポートされ、今後積極的に利用されるプロパティになりますが、IEやアップデートされていないSafariなどでは使用できないため注意が必要です。
※aspect-ratio のブラウザー対応状況は、記事後半で補足しています。
使用するためには、最初に紹介したサンプルコードの「ブロック要素」と「動画の埋め込みコード」に対して、次の CSS を指定します。
.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年現在、Chrome 88 以降の環境でしか対応していませんが、今後は他のブラウザーでも使用できるようです。
※2021年秋頃には Safari 15 でも対応予定とのことです。（2021年6月8日追記）
※個人的な使用感として、企業案件の場合にサイトをチェックするクライアントが、IEや古いSafariを使用していたため、aspect-ratio プロパティが使えず、padding-top ハックに切り替えたことがあります。（2021年11月18日追記）
padding-top ハックを使った方法
次に紹介する方法は padding-top ハックで対応する方法です。
アスペクト比を保つ方法で aspect-ratio が主流になると、この方法を使う必要がありませんが、古いブラウザー対応を迫られた時や、パディングの特性を知ることができるので、この方法も覚えておいて損はないでしょう。
最初に紹介したサンプルコードの「ブロック要素」と「動画の埋め込みコード」に対して、次の 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 の埋め込み動画が完成します。
まとめ
YouTube 動画の埋め込みを CSS でレスポンシブ対応する方法を紹介しました。
使用するサイトの推奨環境に注意して、条件に合う方法を選択してください。
プロパティ aspect-ratio は他の場面でも使う機会があるので覚えておきましょう。
