こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
ウェブサイトにGoogleマップを埋め込むとき、スマホで表示すると横幅がはみ出したり、見づらくなったりした経験はありませんか？
また、YouTube動画をiframeで埋め込んだ際、PCでは問題なくてもスマホではレイアウトが崩れてしまうこともあります。
こうした問題を解決するために、本記事では GoogleマップとYouTubeのiframeをレスポンシブ対応させる方法 を紹介します。
CSSだけで簡単に調整する方法と、より高度な調整をする方法を解説するので、状況に応じて使い分けてみてください！
Googleマップをレスポンシブ対応にする方法
まず、GoogleマップをWebサイトに埋め込む方法と、そのままではレスポンシブ対応にならない問題点を説明します。
通常のGoogleマップ埋め込み
Googleマップを埋め込むには、以下の手順でコードを取得します。
- Googleマップで表示したい場所を検索する
- 左上のメニュー（≡）から「地図を共有または埋め込む」を選択
- 「地図を埋め込む」タブを開き、表示されたiframeのコードをコピー
- コピーしたコードをHTMLに貼り付ける
通常の埋め込みコードは次のようになります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
しかし、このままだと PCでは問題なく表示されるものの、スマホでは横幅がはみ出してしまう ことがあります。
CSSでGoogleマップをレスポンシブ対応にする
この問題を解決するには、iframeを親要素でラップして、CSSでサイズを調整する 方法が一般的です。
以下のコードを使用すると、Googleマップを画面幅に合わせて自動調整 できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
YouTubeのiframeもレスポンシブ対応にする
Googleマップと同じく、YouTube動画の埋め込みもiframeを使用します。しかし、デフォルトのコードではスマホで見づらくなることがあります。
通常のYouTube埋め込み
YouTubeの動画を埋め込むには、動画の「共有」→「埋め込む」からコードをコピーします。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
しかし、 固定サイズ（560×315）のため、スマホでは画面からはみ出してしまう 可能性があります。
CSSでYouTubeの埋め込みをレスポンシブ対応に
Googleマップと同じ方法でYouTube動画もレスポンシブにできます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
この方法を使えば、 スマホでも適切なサイズでYouTube動画を表示できるようになります。
まとめ
GoogleマップやYouTubeのiframeは、そのまま埋め込むとスマホで表示が崩れることがあります。
- GoogleマップとYouTubeのiframeは、固定サイズではなくレスポンシブ対応が必要
- 親要素でラップし、padding-topを使ったCSSで柔軟に調整可能
- どのデバイスでも適切に表示されるようにすることで、ユーザー体験を向上させる
ウェブサイトに地図や動画を埋め込む際は、ぜひこの方法を試してみてください！
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
