ウェブサイトでYouTubeを埋め込む際にレスポンシブ対応させる方法を記します。
CONTENTS
デモ
まずはデモをご確認ください。
CSSで対応する2種類の方法
aspect-ratioで対応させる方法
aspect-ratioはアスペクト比を指定するcssです。
アスペクト比とは縦横の比率のことです。
現在の一般的な考え方でいうと最近のテレビは16:9、スマートフォンは2:1、タブレットは4:3が基本的なアスペクト比となっております。
※iPhone13は9:19.5となっており、Androidはそれよりも縦長の端末があるので一概に2:1とはいえませんが…
アスペクト比を指定することでレスポンシブ対応させる方法は以下の通りです。
YouTubeで取得した下記の埋め込みコードをレスポンシブ対応させます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/ame0P8WQJoA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
html
<div class="youtube__aspect-ratio">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ame0P8WQJoA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
css
.youtube__aspect-ratio {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube__aspect-ratio iframe {
width: 100%;
height: 100%;
}
YouTube埋め込み動画のデフォルトの比率が横560px、縦315pxとなっているため比率でいうと16:9となります。
よってiframeを囲むdiv要素にaspect-ratio: 16 / 9 ;を指定するとアスペクト比を保て、widthに100%を指定するとブラウザサイズに追従させることができます。
aspect-ratioの対応状況は以下の通りです。
2021年11月5日時点でIE以外のブラウザに対応しておりますが、少し古いバージョンのSafariとiOS Safariを切り捨てるかは悩ましいところです。
Can I useによると現在のユーザーが使用しているブラウザの対応状況はGlobal77.23%、Japan67.74%となっており、商業デザインで使用する場合90%はほしいので、表示が崩れる可能性があるのであれば下記のpadding-topのハックを採用してください。
padding-topで対応させる方法
昔からあるハックです。
padding-topを使ってアスペクト比を指定します。
html
<div class="youtube__aspect-ratio">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ame0P8WQJoA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
css
.youtube__padding-top {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube__padding-top iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
padding-top: 56.25% ;とは9を16で割り100をかけた値となります。
16:9, 4:3, 2:1の各アスペクト比を指定する場合は以下の通りです。
16:9 … 9/16*100=56.25%
4:3 … 3/4*100=75%
2:1 … 1/2*100=50%
1:1（正方形）… 1/1*100=100%
WordPressのGutenbergでレスポンシブ対応させるための記述
WordPressのGutenbergでYouTubeのレスポンシブ対応を行いたい場合は以下のcssを追加することで対応可能です。
css
.wp-block-embed__wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
.wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100% ;
height: 100% ;
}
ウェブデザイナーとしてキャリアをスタートして、スマートフォンの台頭によりUI/UX・ゲームデザインを担当、現在はインハウス寄りのアートディレクター兼デザイナー。
社内外のディレクション・ワイヤー設計・デザイン・コーディングを行う。
自社、受託ともにウェブ・アプリ・グラフィック・ゲームの実績多数。
個人サイトやTwitter、YouTubeにてPhotoshopとIllustratorの作例を発信中！
個人としての仕事は、動画制作『【アーティストに学ぶ】#33 Adobe Illustrator iPad版 xコネクリ – アドビ公式』、オンラインセミナー『朝までイラレ』『朝までフォトショ』、著書『フォトショ 魔法のデザイン』（ソーテック社／共著）など。
詳しくはWorkにてご覧ください。
また、お仕事等のご依頼はContactよりご連絡くださいませ。
おすすめ書籍
PhotoshopやIllustratorの使い方についての書籍ではありませんが、イラストを主軸に活動している方は元よりデザインに関わるすべての方におすすめできる書籍です。
どちらかというと中～上級者向けの書籍で、光が色に及ぼす影響や配色の理論から技術的なテクニックまで根本から学べます。
私はディレクションすることも多々あり、今まで感覚的に伝えていた部分の言語化に大いに役立てることができました。
