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

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

今回は、iframeをレスポンシブ対応する方法について、コーディングを解説します。
HTML・CSS初心者の方にはちょっと難しい内容です。

追記：ページ最下段に最近のコードを書きました。aspect-ratioでかんたんになっています。

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

レスポンシブ対応の基礎知識をインプットしたい方は、下記記事の「レスポンシブについて」を参照してください。
昨今では意識せずにレスポンシブ対応をしてサイト制作します。
（記事を書いた当時はまだそうでもなかったため）今読むと、わりと初歩的なないようになっています。

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

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要素にインラインで記述している「width="867" height="488"」は削除します。
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ですが、レスポンシブ対応する場合に、高さ指定が難しいわけです。
CSSの、heightを使ってもうまくいきません。それは当然で、heightを％で指定する場合は、親要素に対して何％という高さ指定になります。calcで高さ計算してもダメです。

レスポンシブサイトに埋め込みますので、高さも横幅に応じて可変の必要があります。
ただし縦横比は固定できますし、縦横比は維持しないと意図しない見せ方になってしまいます。
YouTube動画はおおよそ、横16：縦9（1：0.5625）になっています。

ここで使うのは、paddingの裏技的な使い方です（こういう使い方をときどきやります）。

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）いっぱいに広げています。
position: absoluteを使うときは、浮いているレイヤーのイメージですね（デフォルトはposition: staticなので、position: absoluteは特殊な配置をするときに使います）。

実装例

おわりに

外部サービスの埋め込みは、ほとんどiframeを使っています。埋め込む機会は結構あります。
レスポンシブ対応するためには、ちょっとした工夫がいる場合が多いので、うまく可変しない場合は、今回のコードを参考にしてください。

追記）YouTubeを埋め込む場合にコピペで使いやすい記事を書きました。
こちらも参考にどうぞ。

カラーミーショップに動画を埋め込む方法を解説します

追記：モダンブラウザのコードはかんたん

paddingをつかうテクニックは最近はやらないみたいで、aspect-ratioをつかいます。
ブラウザの対応については問題ないので、つかってもよさそう。

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

<style>
.p-youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.p-youtube iframe {
  width: 100%;
  height: 100%;
}
</style>

執筆者

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

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

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