YouTubeやGoogleマップのiframe埋め込みをレスポンシブ表示に対応する方法

| カテゴリー : HTML/CSS Web制作ノウハウ

YouTubeやGoogleマップをWebサイトに埋め込む際にiframe要素を使います。

iframeとはinline frameの略称で、インラインフレームやアイフレームと呼び、src属性で指定したURL先の内容をHTML中に埋め込んで閲覧できる要素です。

他のHTML要素と違い少し特殊な要素になるので、初めてiframe要素を扱う方は注意が必要です。
注意しておきたいポイントは3点

  • 別ページのHTMLを読み込むため、記述したHTMLとブラウザで表示されるHTMLは大きく異なる
  • iframe要素は幅と高さを持たないので、必ず幅と高さを指定する必要がある
  • iframe要素で読み込んだ他ページに、読み込み元ページからCSSを適用することはできない

レスポンシブ表示に対応する

iframe要素のレスポンシブ表示対応を紹介します

横幅のみ可変するようにする

Googleマップの埋め込みコードは以下のようになります。

横幅のみ可変させる場合はCSSでwidthを調整します。

縦横比率を保ちつつレスポンシブ表示にする

YouTubeを埋め込む際によく使うのが、縦横比率を保ったままレスポンシブ表示する方法です。
YouTubeの埋め込みコードをdiv要素で囲みます。

CSSは以下のように設定します

ポイントは擬似要素のbeforeを使う部分です。beforeに指定したpadding-topが横幅に対するアスペクト比を保ってくれます。
なぜならpaddingの単位を%にすると、包含ブロックの横幅を基準するからです。

動画は16:9が主流なので、56.25%にしています。

beforeで作った16:9のスペースに、iframe要素を重ねていきます。
縦横幅の指定を100%にすることで、作ったスペースにぴったり合うようにしています。

まとめ

iframe要素は最初理解するのが大変です。
一度扱えるようになると、実装で困ることがとても少なくなるのでぜひ試してみてください。

参考記事
インラインフレーム要素 – HTML: HyperText Markup Language | MDN

儲かる会社はやっている!小さな会社のホームページ集客の鉄則

無料の資料をダウンロード

×

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。