GoogleマップやYouTubeの埋め込みがスマホで画面からはみ出る時の直し方

「アクセスページに貼ったGoogleマップが、スマホで見ると右側にはみ出している」「YouTubeの動画を埋め込んだら、スマホでページ全体が横にずれるようになった」。パソコンではきれいに見えているのに、スマホで開いたときだけレイアウトが崩れる、というご相談はとても多いです。

結論から言うと、原因のほとんどは埋め込み用のコードに「横幅600px」「横幅560px」のような固定の大きさが書かれていることです。スマホの画面幅は多くの機種で400px前後しかないため、固定の大きさのまま表示すると、画面の外にはみ出してしまいます。

直し方は、大きく分けて次の3つです。

1. 埋め込みの横幅を「画面幅に合わせる（100%）」指定に変える

2. ブロックエディターの埋め込みブロックや、テーマの設定でスマホ対応を有効にする

3. テーマの追加CSSで、サイト内のすべての埋め込みに「はみ出さない」ルールをまとめて設定する

この記事では、まず確認すること、はみ出す仕組み、地図・動画それぞれの直し方、そしてアクセスページや動画を「スマホで見やすく、表示も速く」するための改善提案までを順番にまとめました。

まず確認：はみ出しているのは本当に埋め込みか

スマホでページが横にずれるとき、原因が地図や動画ではないこともあります。最初に、どこがはみ出しているのかを確かめておきましょう。

・地図・動画の右端が切れている、または右側に白い余白ができる：埋め込みの横幅が固定になっている可能性が高いです。

・ページを横にスワイプできてしまう：どこかの要素が画面幅より広くなっています。地図・動画のほか、横に長い表、長いURLや英数字の連続、大きな画像も原因になります。

・地図・動画を消すと直る：原因は埋め込みで確定です。

パソコンで確認したい場合は、Chromeの「デベロッパーツール」を開き、スマホの画面サイズで表示する機能（デバイスモード）を使うと、スマホでどう見えるかをその場で確認できます。実機でも、iPhoneとAndroidで1台ずつ確認しておくと安心です。

あわせて、「いつから崩れているか」「直前に何をしたか」（地図や動画を貼った、テーマを変えた・更新した、ページビルダーを入れた等）をメモしておくと、原因探しが早くなります。

なぜはみ出すのか：埋め込みコードの「固定の大きさ」

GoogleマップやYouTubeの「共有」から取得できる埋め込み用のコード（iframeと呼ばれる部品）には、初期状態で横幅と高さが数値で書かれています。Googleマップなら横幅600px・高さ450px、YouTubeなら横幅560px・高さ315pxが標準です。

パソコンの画面では、この大きさは記事の幅に収まるので問題になりません。ところが、スマホの画面幅はおよそ360〜430pxです。600pxの地図をそのまま表示すると、200px近くが画面の外に飛び出します。

さらに、地図や動画だけでなく「ページ全体」が横にずれてしまうのは、はみ出した部分に合わせてページの幅が広がってしまうためです。その結果、文字が小さく表示されたり、横にスワイプできてしまったりします。

もう1つのよくある原因が、横幅だけを100%にして、高さを固定のまま残しているケースです。この場合、はみ出しは直りますが、動画が縦長に引き伸ばされたり、上下に黒い帯が出たりします。動画は「横幅に合わせて、高さも16:9の比率で自動的に決まる」ようにしておく必要があります。

直し方1：Googleマップの埋め込みをスマホ対応にする

Googleマップは、多くの場合「カスタムHTML」ブロック（クラシックエディターなら「テキスト」タブ）に埋め込み用のコードを貼り付けて表示しています。

手順

1. 地図を表示している固定ページを編集画面で開き、地図のコードが入っているブロックを選びます。

2. コードの中にある「横幅600」の部分を「横幅100%」の指定に書き換えます。数値の600を「100%」に変えるイメージです。

3. 高さの450は、そのままか、スマホで見やすい300〜350程度に変えます。地図は縦横比が崩れても見た目に大きな問題はないため、高さは固定のままで構いません。

4. 更新して、スマホで表示を確認します。

コードを直接書き換えるのが不安な場合は、地図を表示するプラグインや、テーマに用意されている「地図」ブロックを使う方法もあります。また、ページビルダー（ElementorやSWELLのブロックなど）を使っている場合は、地図の要素の設定画面に横幅や高さの項目があることが多いので、そこで横幅を100%にします。

なお、2か所以上に同じ地図を貼っている場合（会社概要とアクセスページなど）は、すべての箇所を直しておきましょう。

直し方2：YouTubeの埋め込みをスマホ対応にする

YouTubeは、地図と違って縦横比（16:9）を保ったまま縮める必要があります。方法は3つあります。

方法A：埋め込みブロックを使う（いちばん簡単）

ブロックエディターでは、動画のURLを「埋め込み」ブロック（YouTubeブロック）に貼るだけで動画を表示できます。ブロックの設定（右側のパネル）にある「小さなデバイス向けにリサイズ」をオンにすると、画面幅に合わせて縦横比を保ったまま縮みます。

ただし、この機能はテーマ側がスマホ向けの埋め込みに対応していないと効きません。オンにしても直らない場合は、方法Cの追加CSSを使います。

方法B：カスタムHTMLで貼っている場合は、ブロックに置き換える

YouTubeの「共有」→「埋め込む」でコピーしたコードをカスタムHTMLブロックに貼っている場合は、固定の大きさがそのまま効いています。動画のURLだけを埋め込みブロックに貼り直すと、方法Aの状態になり、管理もしやすくなります。

方法C：コードのまま使う場合は、比率の指定を加える

カスタムHTMLのまま使いたい場合は、横幅を100%にしたうえで、高さの数値を外し、「縦横比を16:9に保つ」指定（aspect-ratio）を加えます。こうすると、画面幅がどれだけ狭くなっても、動画が引き伸ばされずに縮みます。

直し方3：サイト全体の埋め込みをまとめてはみ出さないようにする

地図や動画が記事のあちこちに貼ってある場合、1つずつ直すのは大変です。そんなときは、管理画面の「外観」→「カスタマイズ」→「追加CSS」（ブロックテーマの場合は「外観」→「エディター」→「スタイル」→「追加CSS」）で、サイト全体に次のようなルールを設定します。

・記事の本文の中にある埋め込み（iframe）の最大幅を100%にする指定

・高さを自動で決めるようにし、動画には縦横比16:9を保つ指定を加える

・地図には、スマホで見やすい高さ（300px程度）を設定する

この方法なら、今後新しく地図や動画を貼ったときにも、自動ではみ出しを防げます。ただし、追加CSSの書き方を間違えると、ほかの部分のレイアウトに影響することがあります。設定の前に、今の追加CSSの内容をメモ帳などに保存しておき、設定後はパソコン・スマホの両方で主要なページを確認してください。

それでも直らないときに疑うこと

・地図や動画を囲んでいる「枠」（カラムや表、ページビルダーのセクション）自体に、固定の横幅が設定されている

・テーマやプラグインのCSSが、追加CSSより強く効いている

・キャッシュ系のプラグインやサーバーのキャッシュで、古い表示が残っている（キャッシュを削除してから確認する）

ここまで試しても直らない場合や、「コードを触るのが不安」「どこがはみ出しているのか分からない」という場合は、お気軽にご相談ください。原因の箇所を特定して、パソコン・スマホの両方で表示を確認したうえで修正します。

https://coconala.com/services/3421929

ついでにできる改善提案：地図と動画を「見やすく・速く」する

はみ出しを直したら、あわせて次のような改善をしておくと、スマホからの問い合わせや来店につながりやすくなります。

地図の下に、住所と「地図アプリで開く」導線を置く

スマホで埋め込みの地図を指で動かすのは、意外と操作しにくいものです。地図の下に住所・最寄り駅・駐車場の有無などをテキストで書き、Googleマップのアプリで開けるボタンを置いておくと、来店前の方が迷いにくくなります。テキストで住所を書いておくことは、検索エンジンに所在地を伝える意味でも役立ちます。

地図の操作がスクロールの邪魔にならないようにする

ページの途中に大きな地図があると、スマホでページを下にスクロールしようとしたときに、地図だけが動いてしまうことがあります。地図の高さを控えめにする、地図の上下に十分な余白を取る、といった工夫で、ページ全体を読みやすくできます。

埋め込みを「遅延読み込み」にして表示を速くする

地図や動画の埋め込みは、それぞれが外部のデータを読み込むため、ページの表示を遅くする原因になりがちです。画面に表示されるまで読み込みを後回しにする「遅延読み込み」の設定を入れると、ページの最初の表示が速くなります。さらに、動画は最初はサムネイル画像だけを表示し、再生ボタンを押したときに動画を読み込む仕組み（表示高速化系のプラグインに機能があることが多い）にすると、効果が大きくなります。

YouTubeの「プライバシー強化モード」を検討する

YouTubeの埋め込みには、視聴者が再生するまで追跡用のデータを保存しない「プライバシー強化モード」があります。YouTubeの「共有」→「埋め込む」の画面にある設定から選べます。プライバシーポリシーで外部サービスの利用を案内しているサイトでは、あわせて検討してみてください。

横並びのレイアウトは、スマホで縦並びにする

パソコンで「左に地図、右に住所」「動画を2本横並び」のように配置している場合、スマホでも横並びのままだと、1つ1つが小さくなって見づらくなります。カラムブロックの「モバイルでは縦に並べる」設定や、ページビルダーのスマホ表示の設定で、縦並びに切り替えておきましょう。

これまでの対応について

私はWeb制作歴6年で、HP・LP・ECサイトの制作を100件以上手がけてきました。coconalaのWordPress修正サービスでは評価5.0をいただいています。スマホのはみ出しは、1か所を直しても別の場所で同じ崩れが残っていることが多いため、主要なページをパソコン・スマホの両方で確認してから完了のご報告をします。作業の前に、どこまで対応できそうかを正直にお伝えします。NDA対応・本人確認済みで、お預かりしたログイン情報は作業後に削除します。平日日中は1時間以内の返信を目安に対応しています。

まとめ：固定の大きさを「画面幅に合わせる」指定に変える

GoogleマップやYouTubeの埋め込みがスマホではみ出す原因の多くは、埋め込み用のコードに書かれた固定の横幅です。地図は横幅を100%に、動画は横幅100%のうえで縦横比16:9を保つ指定にすれば、多くの場合はきれいに収まります。埋め込みが多いサイトは、追加CSSでまとめて設定しておくと、今後の崩れも防げます。あわせて、住所のテキスト化や遅延読み込みで、スマホで見やすく速いページにしておくと安心です。

「自分で試したけれど直らない」「どこがはみ出しているのか分からない」という場合は、お気軽にご相談ください。症状を伺ったうえで、対応できるかどうかを正直にお伝えします。

https://coconala.com/services/3421929

内容が固まっていない段階のご相談は、プロフィールからどうぞ。

https://coconala.com/users/4536617