GoogleマップやVimeo、Youtube動画のような外部サービスを埋め込みたいことがよくあります。
昨今はレスポンシブ対応でサイトを作っていることが多いので、ブラウザ横幅に応じて、埋め込み部分も可変する必要があります。

しかしながら、埋め込みコードをそのままコピペするとレスポンシブしないことがよくあります。

今回は、iframeをレスポンシブ対応する方法について紹介します。

レスポンシブ対応の基礎知識

レスポンシブ対応の基礎知識をインプットしたい方は、下記記事の「レスポンシブについて」を参照してください。

カラーミーキットの中を見て、レスポンシブ対応について学ぶ

Youtubeを埋め込んでみる

動画上で右クリックするとコンテキストメニューが開きますので、「埋め込みコードをコピー」を選択します。

埋め込みコード例

<iframe width="867" height="488" src="https://www.youtube.com/embed/guO8pkhjAOU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

レスポンシブ対応する必要があるので、width・heightを固定値で指定してはいけません（上記コード例のように埋め込みコードにあらかじめ含まれている場合は削除します）。

埋め込み場所に設置するコードは以下の２つです。
埋め込みコード以外に、ちょっとだけコードを追加しています。
iframeを包合するdiv（iframe-wrapper）を用意して、スタイルをいろいろ入れます。

HTML

<div class="iframe-wrapper">
  <iframe src="https://www.youtube.com/embed/guO8pkhjAOU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

埋め込みコード例にあったwidth、heightは削除します。

CSS

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

width、heightを100%で指定します。こうすることで、横幅に応じて可変する埋め込みになります。

padding-bottom: 56.25%;

iframeを包合するiframe-wrapperですが、レスポンシブ対応する場合に、高さ指定が難しいわけです。
height: 100%;ではうまくいきません。それは当然で、heightを％で指定する場合は、親要素に対して何％という高さ指定になります。
レスポンシブなので固定値で高さ指定できませんし、縦横比で高さ指定することになります。

ここで使っているのは、paddingの裏技的な使い方です。

レスポンシブサイトに埋め込みますので、iframeも高さが定まっていません。
ただし縦横比は固定できますし、縦横比は維持しないと意図しない見せ方になってしまいます。
Youtube動画は、横1.7777：縦1（1：0.5625）になっています。

paddingの％指定は、要素の横幅に対する％になります。
padding-bottom: 56.25%; はすなわち、横幅×56.25％という指定になります。
このようにして縦横比を固定した入れ物を用意するわけです。

position: absolute; の使い方

よく使うCSS知識です。

position: absolute; は基準位置からのオフセット（距離）で要素を配置するプロパティと値です。基準位置から、top、bottom、left、rightで、要素の位置決めします。

デフォルトは position: static; で、特に指定していない場合は、ブラウザの端に基準位置があります。
position: absolute; を包合している親・先祖要素に position: relative;（または static 以外） が指定されている場合は、親・先祖要素の端が基準位置になります。

Webサイト制作していると、ブラウザの端に基準位置にして、位置決めすることはほとんどありません。
position: absolute; を使うときは position: relative; で包んであげる必要があります。

top: 0; left: 0;で、iframeを左上隅に配置し、width: 100%; height: 100%;で入れ物（iframe-wrapper）いっぱいに広げています。

実装例

おわりに

外部サービスの埋め込みはよく使います。
レスポンシブ対応するためには、ちょっとした工夫がいる場合が多いので、うまく可変しない場合は、コードを参考にして下さい。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら