GoogleマップやYouTube動画の埋め込みのはみ出しを修正する方法

ホームページ（ウェブサイト）にGoogleマップやYouTube動画を埋め込んだ際、要素からはみ出したり、スマートフォンで閲覧時のみはみ出してしまったり、画面全体の表示が崩れてしまったりすることがあります。

今回は、iframeに対する基本的な調整方法から、CSSを用いたレスポンシブ化、弊社で対応したFlexboxレイアウトにおける特殊な修正事例、そして埋め込みコードに含まれる各属性の意味まで、具体的な解決策を解説します。

埋め込み要素（iframe）がスマホなどではみ出す主な原因

GoogleマップやYouTubeから取得した埋め込みコードは、初期状態でピクセル数が固定されている場合があります。これが原因で、スマートフォンのような小さな画面で閲覧した際に不具合が生じやすくなります。

iframeタグの幅（width）が親要素のサイズを超えている

Googleマップから取得した埋め込みコードの初期状態では、width=”600″ のようにピクセル数が固定されています。この数値をそのままホームページ（ウェブサイト）に貼り付けると、スマートフォンの画面幅よりもiframeの幅が大きくなり、結果として画面からはみ出してしまいます。

CSS｜width・max-width・min-width 要素の横幅

画面サイズに合わせて自動縮小（レスポンシブ対応）されていない

現代のホームページ（ウェブサイト）は、閲覧する端末の画面サイズに合わせて自動でレイアウトを調整するレスポンシブ対応が基本です。しかし、埋め込みコードに含まれる数値をそのままにしておくと、ブラウザは指定された固定サイズを維持しようとします。そのため、画面幅が縮まってもiframeは縮小されず、レイアウトの崩れを引き起こします。

はみ出しを防ぐための具体的な修正方法

iframeのサイズを調整して綺麗に表示させるための、HTMLとCSSを用いた具体的な対処法について解説します。

CSSで max-width: 100%; を一括指定する基本の解決策

古くから使われている極めて簡単で効果的な解決策として、CSSで埋め込み要素全体に対して max-width: 100%; を指定する方法があります。

具体的には、スタイルシートに「

embed, iframe, object, video { max-width: 100%; }

と記述します。これにより、iframeだけでなく、その他の動画や埋め込みメディアも親要素の幅を超えないように一括で制御できます。リセットCSSなどにもよく組み込まれる手法であり、手軽にレイアウトの崩れを防ぐことができます。

HTMLのwidth属性を「100%」に変更するシンプルな解決策

最も手軽な方法は、埋め込みコード内のwidth属性をパーセンテージ指定に変更することです。

コード内にある width=”600″ という部分を width=”100%” に書き換えます。高さを示す height=”450″ などの数値は任意のピクセル数で残しておきます。これにより、親要素の幅に合わせてiframeの幅が自動で伸縮するようになります。

CSSの aspect-ratio を用いたアスペクト比の維持（モダンブラウザ向け）

iframeをレスポンシブ対応させる際、単に幅を100%にするだけでは高さが固定されたままになります。画面幅を縮めた際に比率が崩れるため、無理に収めようとしてレイアウトが破綻してしまいます。この問題を解決するために、最新のCSSプロパティである aspect-ratio を使用します。親要素に対して width: 100%; を設定し、aspect-ratio: 16 / 9; のように縦横比を指定し、overflow: hidden; で制御するのが標準的なアプローチです。これにより、どのような画面幅でも美しい比率を保ったまま表示させることができます。
<div class="map-container">
<!-- GoogleマップやYouTubeなどのiframeコードを配置します -->
<iframe src="..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

.map-container {
width: 100%;
aspect-ratio: 16 / 9; /* 縦横比を指定します */
overflow: hidden;
}
.map-container iframe {
width: 100%;
height: 100%;
border: none;
}

親要素で比率を固定する調整（広く互換性がある方法）

古いブラウザにも対応させる必要がある場合は、iframeを専用のラッパー（divタグなど）で囲み、paddingを利用して比率を固定する手法を用います。親要素に対してwidth: 100%; height: 0; padding-top: 56.25%;（16:9の場合）を指定し、overflow: hidden; を設定します。その上で、内側のiframeに対して position: absolute; top: 0; left: 0; width: 100%; height: 100%; を指定します。これにより、すべての環境で安定したアスペクト比を維持できます。

<div class="map-wrap">
<!-- GoogleマップやYouTubeなどのiframeコードを配置します -->
<iframe src="..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

.map-wrap {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 16:9 の比率を維持します。4:3の場合は75%を設定します */
overflow: hidden;
}
.map-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}

親要素（コンテナ）のスタイルが原因となるケース

iframe自体に幅を100%とする指定を行っても、親要素（ラッパー要素）の構造やスタイル設定によって、うまく表示されないことがあります。

親要素に幅の制限がない、または固定値が設定されている

iframeに対して width: 100% を指定しても、親要素自体が画面幅を超えて広がっている場合や、絶対値（width: 800px; など）で固定されていてレスポンシブ対応されていない場合、iframeもそれに従って画面からはみ出します。まずは親要素の幅が適切に制御されているかを確認することが重要です。

意図しない overflow: hidden や max-width による干渉

親要素に対して意図しない max-width が設定されて要素を押し出していたり、overflow: hidden によって本来表示されるべき領域が切り取られてしまっているケースもあります。スタイルシート全体を見直し、不要な制限がかかっていないか点検します。

CSS｜overflow オーバーフロー（X・Y）要素のはみ出し制御

FlexboxやGridレイアウトにおける子要素の最小幅（min-width）の影響

親要素が display: flex; や display: grid; で構成されている場合、子要素の最小幅（min-width）が自動計算されてしまい、width: 100%; が効かずにiframeのデフォルトサイズが優先されてはみ出すことがあります。このような場合は、子要素に対して適切な幅や比率を明示的に指定するなどの対策が必要です。

• display flex（フレックス）とinline-flex
• display grid（グリッド）とinline-grid

弊社で対応したホームページの特殊な修正事例

基本的なiframeの調整だけでは解決しないケースも少なくありません。実際に弊社で対応した修正事例を交えながら、より専門的な視点で解説します。

会社概要など地図があるページだけが縮小表示される現象

ホームページ（ウェブサイト）全体はスマートフォン対応できているのに、会社概要などGoogleマップを埋め込んだページだけが、PC版のように縮小されて表示されてしまうというご相談をよく受けます。

これは、iframeの固定幅が画面幅を押し広げてしまい、ブラウザが意図せず全体を縮小してしまうことが原因です。前述したwidthの100%化やCSSによる調整を行うことで、この現象は解消します。

Flexboxレイアウト内で発生したiframeの右側への押し出し現象

ある事例では、PC表示時に display: flex; を使用して、左側にテキスト、右側にGoogleマップを配置するレイアウトを組んでいました。しかし、Flexboxの子要素に対して具体的な横幅が指定されていなかったため、iframeの固定サイズが優先されてしまいました。さらに、親要素自体には幅の制限がなく、右寄せの指定がされていたため、固定サイズを持ったiframeが右側の画面外へ大きく押し出されてしまうという現象が発生していました。

Flexコンテナ内での各コンテンツの割合制御による解決策

この問題を解決するためには、Flexboxの子要素に対して、適切な幅や比率を指定し、親要素の領域内に収まるように制御する必要があります。具体的には、テキストエリアの要素に flex: 1; を指定して残りのスペースを埋めさせます。そして、地図の親要素に対して max-width を設定して上限を定めつつ、width: 100%; を指定して可変対応させます。

最後に、iframe自身の幅を 100% に変更し、親要素の幅に追従するようにCSSを修正しました。これにより、ウィンドウ幅を縮めても、Googleマップが指定した枠のサイズに収まり、画面からはみ出すのを防ぐことができました。

@media screen and (min-width: 1080px) {
/* 親要素であるFlexコンテナの設定 */
.access .contentArea {
display: flex;
justify-content: flex-end;
align-items: center;
}
/* テキストエリアなどのコンテンツ（余ったスペースを埋めるように指定します） */
.access .contentArea .content1 {
flex: 1;
}
/* 地図や動画エリアの親要素（最大幅を制限して可変にします） */
.access .contentArea .content2 {
max-width: 477px;
width: 100%;
}
/* iframe自身を親要素の幅に追従させます */
.access .contentArea iframe {
width: 100%;
height: 362px;
}
}

埋め込みコード（iframe）を構成する各属性の意味

提供されるコードをそのまま貼り付けるだけでなく、記述されている各属性の役割を正しく理解しておくことは重要です。ここではGoogleマップとYouTube動画、それぞれのコードの意味を紐解きます。

Googleマップの埋め込みコードの属性について

Googleマップの埋め込みコード（株式会社ファンフェアファンファーレ）

Googleマップのコードには、src属性で地図のURLが指定され、widthとheightで幅と高さが定義されています。

参考（株式会社ファンフェアファンファーレのマップ埋め込みコード）

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3267.445215852095!2d135.73686930000002!3d35.020590399999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600107c16da6f017%3A0xd2a574dda1232284!2z5qCq5byP5Lya56S-44OV44Kh44Oz44OV44Kn44Ki44OV44Kh44Oz44OV44Kh44O844Os!5e0!3m2!1sja!2sjp!4v1791902653678!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>

style=”border:0;” は地図の周囲の枠線を消すための記述です。allowfullscreen 属性は、地図を全画面表示にする機能を許可します。loading=”lazy” は、画面のスクロールに合わせて遅延読み込みを行う設定であり、ホームページ（ウェブサイト）の表示速度向上に役立ちます。referrerpolicy=”strict-origin-when-cross-origin” は、セキュリティとプライバシーを保護しつつ、適切なリファラ情報を送信するための設定です。

YouTube動画の埋め込みコードの属性について

YouTubeのコードでも幅と高さ、src属性が基本となりますが、特有の属性も含まれます。

title属性は動画のタイトルを示し、アクセシビリティの向上に寄与します。frameborder=”0″ は枠線を消す古い記述ですが、現在も互換性のために残されています。

allow属性の中には、accelerometer（加速度センサー）、autoplay（自動再生）、clipboard-write（クリップボード）、encrypted-media（暗号化メディアの再生）、gyroscope（ジャイロセンサー）、picture-in-picture（ピクチャーインピクチャー）といった、動画再生に関連する様々な機能の許可設定が並んでいます。

ホームページの修正・更新はお任せください

GoogleマップやYouTube動画のはみ出し修正をはじめ、スマートフォン表示の最適化やレイアウト崩れの修正など、ホームページ（ウェブサイト）に関するお困りごとがありましたら弊社にご相談ください。単なる表示の修正にとどまらず、閲覧するユーザーにとって使いやすく、事業の成果につながる適切な構造へと改善します。

ホームページの更新・修正料金について

弊社では、他社で制作されたホームページ（ウェブサイト）の部分的な修正から、全体的なCSSの調整、SEOを意識した構造の最適化まで幅広く対応しています。具体的な費用やサポート内容については、以下のページでご案内しています。現状の課題に合わせて柔軟な対応が可能ですので、ぜひ一度ご確認ください。

ホームページの更新・修正料金 価格表