YouTube埋め込みレスポンシブ対応：崩れる原因と直し方
この記事には広告リンクを含みます。紹介している商品・サービスの一部はアフィリエイトプログラムを利用しています。 商品・サービスの選定はご自身の判断でお願いいたします。
「スマホでYouTubeが縦長になっている」「動画が画面からはみ出している」——制作後にクライアントから連絡が来ることも、自分でチェックして気づくこともあります。
YouTubeの埋め込みコードをそのまま貼り付けると、デフォルトでは幅と高さが固定値になっているため、スマホ画面では縦横比が崩れます。
この記事では、崩れる原因の切り分けから、aspect-ratioとpaddingハックの使い分け基準、実際のコードと確認手順までを整理します。
こんな症状が出ていたらレスポンシブ未対応
まず現状を確認してください。
- スマホで動画の右端が画面からはみ出している
- 動画が縦長・横長に引き伸ばされて表示されている
- PC表示は問題ないのに、スマホだけ崩れている
- WordPressのビジュアルエディターにiframeコードを直接貼り付けた
- iframeタグに
width="560" height="315"がそのまま残っている
最後の2つに該当する場合は、ほぼ確実にレスポンシブ未対応です。
自分が見てきた保守案件では、このケースで8〜9割を説明できています。
崩れる原因の切り分け
崩れる原因は大きく3パターンです。上から順に確認してください。
- iframeに固定サイズが残っている — YouTubeの「共有→埋め込み」から取得したコードには
width="560" height="315"が含まれます。このままHTMLに貼ると、CSSより属性値が優先されて固定サイズになります - クラシックエディターに直接iframeを貼った — GutenbergのYouTubeブロックは自動でレスポンシブ対応してくれますが、クラシックエディターのビジュアルモードにiframeコードを直接貼ると固定サイズのまま出力されます
- ラッパーのCSSが効いていない — aspect-ratioやpadding-topを指定したラッパーdivは入れているが、iframeに
width: 100%; height: 100%;が指定されていない、またはposition指定が抜けている
「自分で埋め込んだのですが、スマホで変になってしまって」——保守案件で、クライアントが自分でYouTubeを貼った後に崩れたという連絡は複数回経験しています。
原因は毎回「iframeの固定サイズがそのまま」でした。
aspect-ratioとpaddingハック、どちらを選ぶか
修正方法は2つあります。選ぶ基準は対応すべきブラウザ範囲とコードの管理しやすさで決まります。
方法 | コード量 | IE対応 | 使いどころ |
|---|---|---|---|
aspect-ratio（推奨） | 少ない・ラッパー不要も可 | 非対応 | 2023年以降の新規案件・IEを切っている案件 |
padding-topハック | 多い・ラッパーdivが必要 | 対応 | 社内システム系・古いブラウザが残存している案件 |
2025年以降の新規案件であれば、aspect-ratioで問題ありません。
「クライアントがIEを使っているかもしれない」という案件はまだゼロではないので、要件確認をしてから選ぶのが安全です。
実際のコードと確認手順
aspect-ratioを使う方法（推奨）
iframeに直接指定できるシンプルな書き方です。
<iframe src=""https://www.youtube.com/embed/XXXXXXXXX""
title="動画のタイトルを入れてください" 100%; aspect-ratio: 16 / 9; border: none;"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>title属性は必ず入れてください。
スクリーンリーダーがtitleなしのiframeを「フレーム」としか読み上げられなくなり、アクセシビリティに問題が出ます。
競合記事の多くがこの点を省略しているので、案件品質の差になります。
padding-topハックを使う方法
<div class="video-wrapper">
<iframe src=""https://www.youtube.com/embed/XXXXXXXXX""
title="動画のタイトルを入れてください"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
/* CSS */
.video-wrapper {
position: relative;
padding-top: 56.25%; /* 9 ÷ 16 × 100 */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}56.25%は「9÷16×100」の計算値です。
4:3の動画なら75%（3÷4×100）になります。
実装後の確認手順
- ChromeのデベロッパーツールをF12で開く
- デバイスモードに切り替える（Ctrl+Shift+M、Macの場合はCmd+Shift+M）
- スマホ端末を選択して表示を確認する
- ウィンドウ幅を変えながら、動画が比率を保って縮小・拡大されるか確認する
WordPressサイトへのCSS一括適用
WordPressの保守案件でよく使うのが、テーマCSSに一括対応を入れておく方法です。
/* style.css または「追加CSS」に追記 */
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtube-nocookie.com"] {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: none;
}このCSSを入れておくだけで、クライアントが後からビジュアルエディターに貼ったiframeにも自動で適用されます。
「また崩れた」という問い合わせが大幅に減ります。
aspect-ratioとpaddingハックの技術的な背景や、CSSでアスペクト比を維持する仕組みの詳細は CSSのaspect-ratioで動画をレスポンシブ対応させる実装パターン にまとめています。
ここまで自力で直せる、ここからはプロ領域
状況 | 自力対処 | プロ推奨 |
|---|---|---|
iframeに固定サイズが残っている | ○ 属性を削除してCSSで対応 | — |
WordPressの追加CSSを編集したい | △ CSSの知識がある場合のみ | テーマ構造が複雑な場合は依頼推奨 |
追加CSSが他の要素に影響した | — | ○ セレクタ影響範囲が読めない場合は依頼 |
AstroなどSSGや静的サイトでの実装 | — | ○ ビルド設定・ベースパスが絡む場合は依頼推奨 |
WordPressのCSSを直接編集する際、セレクタの範囲が広すぎると他のデザイン要素に影響が出ることがあります。
「直したら別の場所が崩れた」という状況は保守案件でよく出ます。
不安がある場合は一度相談してください。
まとめ
- YouTube埋め込みがスマホで崩れる原因の多くは「iframeの固定サイズが残っている」こと
- 新規案件はaspect-ratioがシンプルで推奨。IE対応が必要な場合はpadding-topハックを使う
- WordPressはCSSで一括対応しておくと、クライアントが自分で貼った動画も自動でレスポンシブになる
- iframeのtitle属性はアクセシビリティ対応として必ず入れる
- CSSの影響範囲が読めない場合はプロに相談する
コーディング代行・実装判断で詰まった案件があれば、Buildに振ってください。
YouTube埋め込みのような細かい実装から、サイト全体の構成見直しまで対応しています。
北海道の事業者の方で、HPの保守・改修について相談したい場合もお気軽にどうぞ。
