概要
iframeとは、あるウェブページのコンテンツを別のページの中に埋め込む方法です — これにより、その機能を自分で構築することなく、YouTube動画、Googleマップ、サードパーティウィジェットを自分のページに直接配置できます。これらのサービスからコピー&ペーストするほとんどの埋め込みコードは、典型的なデスクトップ画面用にサイズ設定された、固定ピクセル幅と高さがすでに設定された状態で提供されます。
このチェックは、ページに埋め込まれたiframeが画面とともにサイズ変更されるように設定されているか(「レスポンシブ」)、それとも訪問者の実際の画面幅にかかわらず、その元の固定サイズのままかを確認します。
重要な理由
例えば560×315ピクセルの固定サイズで埋め込まれた地図や動画は、デスクトップ画面では問題なく機能しますが、電話の画面全体よりも簡単に幅が広くなり、同じ種類の水平スクロールを強制したり、視覚的に完全に切り取られたりすることがあります。これはよくある、見逃しやすい問題です。まさに、埋め込みコードは通常、プラットフォーム(YouTube、Googleマップ)によって、貼り付けられたとおりに事前に書かれており、モバイル用にさらなる調整が必要であることを示す明確な兆候がないためです。
壊れた埋め込みは、小さなテキストの問題に比べて不釣り合いに目立ちます — 半分に切り取られた地図や画面からはみ出す動画プレーヤーは、電話でそのページの部分までスクロールしたどの訪問者にとっても、即座に視覚的に明白です。
修正方法
- サイト上のすべての埋め込みiframe(一般的には動画、地図、サードパーティウィジェット)を特定し、実際の電話でどう表示されるか確認しましょう。
- iframeを、幅をパーセンテージで制御するようにスタイル設定されたコンテナでラップし、iframe自体は元の固定ピクセル幅を使用するのではなく、そのコンテナを埋めるように設定しましょう(
width: 100%)。 - 特にYouTube埋め込みについては、どんな画面幅でも動画を比例的にスケーリングする固定アスペクト比(16:9など)のラッパーが一般的なアプローチです — このまさにそのパターンのために多くの無料コードスニペットが利用可能です。
- ウェブサイトビルダーを使用している場合、生のiframeコードの代わりに組み込みの「埋め込み」または「動画」ブロックがあるか確認しましょう — これらは通常デフォルトですでにレスポンシブです。
- その後電話で埋め込みを再確認し、オーバーフローするのではなく正しくサイズ変更されることを確認しましょう。