HPに埋め込んだYouTubeがスマホで崩れる原因とWordPressでの直し方
この記事には広告リンクを含みます。紹介している商品・サービスの一部はアフィリエイトプログラムを利用しています。 商品・サービスの選定はご自身の判断でお願いいたします。
スマートフォンで自社サイトを確認したとき、YouTube動画だけ横に飛び出していたり、縦に引き伸ばされていたりした経験はありませんか。
パソコンでは問題なく表示されていても、スマホで見ると動画が画面からはみ出す状態は、YouTubeを埋め込んでいるサイトで非常によく起きています。
この記事では、崩れの原因と「自分で試せる直し方」「業者に頼んだ方がいい状況」の判断基準を整理します。
まずこの症状を確認してください
スマートフォンで自社サイトの動画ページを開いて、以下をチェックしてみてください。
- 動画がページの右側や画面の外にはみ出している
- 動画の縦横比がおかしく、縦に引き伸ばされたり横につぶれたりしている
- 動画の下に横スクロールバーが出る
- スマホでだけ崩れて、パソコンでは正常に見える
1つでも当てはまるなら、この記事の方法で直せる可能性が高いです。
「パソコンで確認したから大丈夫」と思っていたサイトでも、スマートフォンで開くと崩れていることはよくあります。
スマホからのアクセスを取りこぼすのはもったいないので、一度確認しておくことをおすすめします。
崩れの原因はほぼひとつです
YouTubeの「共有」ボタンから取得できる埋め込みコードには、デフォルトで動画の大きさがピクセル固定値で書かれています。
width="560" height="315"パソコンの画面幅は1,000px以上あることが多いため、560pxの動画は問題なく収まります。
一方、スマートフォンの画面幅は300〜430px程度（機種によって異なります）です。
「560pxの動画」を「400pxの画面」に表示しようとすると、動画が画面からはみ出したり、縦横比が崩れたりします。
「スマホで見たら動画だけ横にはみ出していて、ページが横スクロールするようになってしまった」
この種の相談は、HP更新後にクライアントから受けることが多いです。
YouTubeの埋め込みコードをそのままコピーして貼り付けると、この状態になります。
逆に言えば、原因が固定幅のiframeである場合、CSSを数行追加するだけで直ります。
WordPressなら追加CSSで自分で直せます
WordPressで制作されたサイトであれば、管理画面から数行のCSSを追加するだけで対応できます。
難しいファイル操作は不要で、コードをコピーして貼るだけです。
操作手順
- WordPress管理画面にログインする
- 「外観」→「カスタマイズ」を開く
- 左サイドメニューから「追加CSS」をクリックする
- 下記のCSSコードを貼り付ける
- 「公開」ボタンをクリックして保存する
- スマートフォンで動画ページを開いて確認する
/* YouTube埋め込みのレスポンシブ対応 */
iframe[src*="youtube"],
iframe[src*="youtu.be"],
.wp-block-embed__wrapper iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}このCSSは「YouTubeのiframeを画面幅いっぱいに広げ、縦横比16:9を保ったまま表示する」という指示です。aspect-ratio: 16 / 9（縦横比を固定するCSSプロパティ）が、比率を維持しながら画面幅に合わせて縮む仕組みの肝です。
保存してからスマートフォンで確認すると、動画が画面内に収まっているはずです。
なお、WordPressの「追加CSS」はサイト全体に適用されますが、上記はYouTubeのiframeにだけ絞った指定です。
他の表示に影響することはほぼありません。
追加後に他の表示が崩れた場合は、追加分を削除すれば元に戻ります。
aspect-ratioの技術的な詳細や、旧ブラウザ向けの代替実装については、YouTube動画をレスポンシブ対応で埋め込む実装方法の解説もあわせてご覧ください。
自分では触らない方がいいケースの判断基準
追加CSSを試しても直らない場合、または以下の状況になる場合はプロに依頼した方が安全です。
状況 | 判断 | 理由 |
|---|---|---|
追加CSSを貼ったら直った | 自力対応OK | 変更の影響範囲が最小限 |
追加CSSを貼っても変化がない | プロに依頼 | テーマのHTML構造に原因がある可能性 |
「functions.phpに追記する」という手順が出てくる | プロに依頼 | 誤ると他の機能や表示が壊れるリスクあり |
動画以外のレイアウトも同時に崩れている | プロに依頼 | 別の問題が重なっているケースが多い |
WordPressの「追加CSS」は、サイトの中で最も安全に変更できる場所です。
ここで直らない場合は、テーマのテンプレートファイルやPHPに触れることになるため、自力での対応は避けた方がよいです。
地方団体のHPリニューアルを担当した際も、追加CSSでサイト内のYouTube埋め込みを一括対応しました。
スマホで確認して完了、という流れで問題なく対処できました。
一方で、テーマ固有の構造に原因があって追加CSSが効かなかったケースでは、テンプレートの修正が必要になり、後から大きな工数になったこともあります。
「試して直らなかったらどうしよう」という不安があれば、最初から相談した方が結果的に早く解決することが多いです。
まとめ
- YouTubeがスマホで崩れる原因はほぼ「iframeの幅がピクセル固定になっている」こと
- WordPressの「追加CSS」に
aspect-ratio: 16/9; width: 100%;を追加するだけで直るケースが多い - 追加CSSで直らない場合やfunctions.phpへの追記が必要になった場合はプロ領域
- パソコンで問題なくても、スマホユーザーには崩れた状態が見えているので早めの確認を
スマホ対応はGoogleの検索順位にも影響します。
YouTube崩れが気になり始めたなら、他のスマホ表示も一緒に確認してみるとよいタイミングです。
「追加CSSを試したが直らない」「管理画面の操作が不安」「他の表示崩れも一緒に直したい」という場合は、一度 Build にご相談ください。
HP保守・改修・スマホ対応のご依頼はお問い合わせページからどうぞ。
コーディング代行や実装の判断で詰まっている制作会社さんのご相談も受け付けています。
