BLOG

  • Facebook
  • Twitter

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

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

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!