design studio iR
お問い合わせはこちら

スマートフォンで動画の上に大きな空白が出る――レスポンシブ対応のYouTube埋め込みで直面した問題と、その解決プロセス

SHARE

導入：「見た目は正しいのに、なぜスマホだけ崩れるのか」

ホームページにYouTube動画を埋め込む作業は、一見シンプルに見えます。YouTubeが提供する埋め込みコードをそのままコピーして貼り付ければ、確かに動画は表示されます。しかしそのコードは、幅560px・高さ315pxという固定サイズで記述されており、スマートフォンのような小さな画面では動画がはみ出す、あるいは縦横比が崩れるといった問題が生じます。

そこで多くのWeb担当者が採用するのが、「padding-topを使ったレスポンシブ埋め込み」という手法です。これはCSSの記述で動画の縦横比（16:9）を維持しながら、画面幅に合わせて自動でリサイズする方法として広く知られており、解説記事も多数存在します。

ところが実際にこの手法を実装してPC上で確認すると正常に表示されているにもかかわらず、スマートフォンでページを確認すると、動画の上部に意図しない大きな空白が発生するケースがあります。

これはまさに今回、飯田市内の事業者サイトに動画を埋め込む作業で直面した問題です。「正しい手法で実装したはずなのに、スマホだけ崩れる」という状況は、コードの表面だけを確認していては原因を特定できません。本記事では、この問題に対してどのように仮説を立て、どこに着目して検証し、解決に至ったかを記録します。

直面した矛盾：「正しいコード」なのに空白が生まれる

最初に試みたのは、一般的に知られている padding-top を用いたレスポンシブ埋め込みです。具体的には以下のような構造のコードです。

html

<div style="position: relative; width: 100%; padding-top: 56.25%; overflow: hidden;">
  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/..." ...>
  </iframe>
</div>

このコードが「なぜ機能するか」を補足しておきます。padding-top: 56.25% という値は、16:9の縦横比（9 ÷ 16 × 100 = 56.25）を表しています。CSSの仕様では padding の % 指定は親要素の幅を基準にするため、幅が変わっても高さが比例して追随します。その内側に iframe を position: absolute で広げることで、常に16:9の比率を保ったまま動画が表示されるという仕組みです。

理論上は正しいコードです。PCブラウザでの確認でも問題はありませんでした。

しかし実際にスマートフォンでページを開いたところ、動画の直上に不自然な空白が発生していました（スクリーンショットにある通り、写真と動画の間に大きな余白が生まれている状態）。

最初に立てた仮説は「前後の要素のmarginが影響しているのではないか」というものでした。そのため、メディアクエリで画面幅768px以下の場合に margin を0にするCSSを追加しましたが、空白は解消されませんでした。

次に「paddingやborderがwidth計算に含まれているのではないか（box-sizingの問題）」と考え、box-sizing: border-box を追加しましたが、これも効果がありませんでした。

検証と真因：padding-topの「%計算の基準」に潜む落とし穴

問題の核心は、padding-top: 56.25% が参照する「親要素の幅」が、想定と異なっていた点にあります。

この手法は「divの幅が画面幅と一致している」ことを前提にしています。しかし実際のWordPressサイト等では、コンテンツエリアがページ全体の幅ではなく、テーマのレイアウト構造（カラム・コンテナ・ブロック）の中に入っています。PCでは問題ないように見えても、スマートフォンではビューポートの幅とコンテンツエリアの幅がずれることがあります。

さらにこの問題は、padding-top が「高さを確保するため」に機能している点にも起因します。padding-top: 56.25% によって確保されたスペースは、あくまでコンテナの高さです。その内側に position: absolute で配置された iframe がそこへ収まる形になりますが、もし何らかの理由でコンテナの幅計算がずれた場合、確保される高さ（＝空白）が過剰になります。スマートフォンでのみ問題が起きていたのは、レイアウトの折り返しやビューポートの解釈の違いにより、この幅計算が PC と異なる結果を返していたためと考えられます。

この問題の根本解決として採用したのが、aspect-ratio プロパティへの切り替えです。

html

<div style="width: 100%; margin: 0 auto;">
  <iframe
    style="width: 100%; aspect-ratio: 16 / 9; height: auto; display: block;"
    src="https://www.youtube.com/embed/..."
    ...>
  </iframe>
</div>

aspect-ratio: 16 / 9 は、要素自身の縦横比を直接指定するプロパティです。padding-top の手法が「コンテナの高さを幅から逆算して確保する」という間接的な方法であったのに対し、aspect-ratio は「この要素は常に16:9の比率を保て」と直接指示するものです。

これにより、外側のコンテナが不要になり、空白の原因となっていた「コンテナの幅計算のずれ」自体が消滅します。height: auto と組み合わせることで、幅が変われば高さも自動で追随します。

スマートフォンでの確認でも空白は発生せず、問題は解消しました。

aspect-ratio の対応状況について： このプロパティは2021年以降、Chrome・Firefox・Safari・Edgeの主要ブラウザすべてで標準サポートされています。現時点において、一般的な用途で使用することに実用上の問題はありません。

実務への応用：地域密着型ビジネスのサイト運営で気をつけるべきこと

今回の事例から、以下の点が地域ビジネスのWeb担当者にとって実務上の教訓となります。

1. 「PCで正常」はスマートフォン対応の保証にならない

WordPressをはじめとするCMSは、テーマによってコンテンツエリアの構造が大きく異なります。HTMLとCSSの仕様では問題のないコードが、テーマのレイアウト構造の中では意図通りに動かないケースが存在します。動画やiframe要素を追加した際は、必ずスマートフォン実機（または開発者ツールのモバイルエミュレーション）で確認することが必要です。

2. 「よく使われている手法」が常に最善とは限らない

padding-top を使ったレスポンシブ動画埋め込みは、aspect-ratio が普及する以前の主流な手法でした。現在でも多くの解説記事に掲載されていますが、ブラウザの進化により、よりシンプルかつ問題の起きにくい方法が利用可能になっています。実装技術は年々更新されるため、古い情報をそのまま踏襲することにはリスクが伴います。

3. 機会損失としての「表示崩れ」

飯田市のような地域密着型ビジネスにとって、ホームページは地域の見込み客への重要な接点です。スマートフォンからのアクセスが全体の60〜70%を占めることも珍しくない現在、スマートフォン上での表示品質は直接的に問い合わせや来店に影響します。「PCでは正常」という認識のまま放置された表示崩れは、静かに機会損失を生み続けます。

総括：技術・データ・表示品質を現場目線で統合することの重要性

今回の問題は、コードの文法的な誤りではありませんでした。理論上は正しい手法が、実際の環境（CMSテーマのレイアウト構造、スマートフォンのビューポート解釈）との組み合わせによって意図しない動作を引き起こした、というケースです。

こうした問題は「コードを知っている」だけでは解決できません。「なぜこのコードがこう動くのか」という仕様への理解と、「実際のページではどういう構造の中に入るのか」という現場の文脈を組み合わせる視点が必要です。

私たちが地域の事業者のホームページ制作・改善に取り組む際に重視しているのは、まさにこの点です。表面的な「動いているように見える」状態ではなく、実際のユーザー環境（使用デバイス・ブラウザ・回線速度・操作導線）に照らし合わせて、問題が潜んでいないかを泥臭く検証することを実務の基本としています。

飯田市・下伊那地域で「ホームページを作ったが成果が出ない」「スマートフォン対応が不安」といった課題をお持ちの事業者様は、ぜひ一度ご相談ください。

前の記事

P-MAX広告で後からマーチャントセンターは連携できるか？実務…
Home
サービス
制作実績
お客様の声
デザイナー紹介
問合せ