INFORMATION お知らせ！
ウェブサイトでYouTubeを埋め込む際にレスポンシブ対応させる方法を記します。
CONTENTS
- デモ
- CSSで対応する2種類の方法
- aspect-ratioで対応させる方法
- padding-topで対応させる方法
- WordPressのGutenbergでレスポンシブ対応させるための記述
デモ
まずはデモをご確認ください。
DEMO
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の対応状況は以下の通りです。
Can I use
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・ゲームデザインを担当、現在はインハウス寄りのアートディレクター兼デザイナー。 社内外のディレクション・ワイヤー設計・デザイン・コーディングを行う。 自社、受託ともにウェブ・アプリ・グラフィック・ゲームの実績多数。
本サイトやX、YouTube、Instagram、TikTokなどの各種SNSにてPhotoshop、Illustrator、Fireflyの作例を発信中！
個人としての仕事は、動画制作『【アーティストに学ぶ】#33 – アドビ公式』、オンラインセミナー『朝までイラレ』『朝までフォトショ』、著書『デザインの仕事がもっとはかどるAdobe Firefly活用テクニック50』（インプレス）など。
詳しくはWorkにてご覧ください。
また、お仕事等のご依頼はContactよりご連絡くださいませ。
おすすめ書籍
リンクPhotoshopやIllustratorの使い方についての書籍ではありませんが、イラストを主軸に活動している方は元よりデザインに関わるすべての方におすすめできる書籍です。
どちらかというと中～上級者向けの書籍で、光が色に及ぼす影響や配色の理論から技術的なテクニックまで根本から学べます。
私はディレクションすることも多々あり、今まで感覚的に伝えていた部分の言語化に大いに役立てることができました。