【簡単】レスポンシブ対応されたiframeの埋め込み方法【YouTube等がはみ出すのを防ぐ】

【iframeのレスポンシブ対応に悩む人】

「YouTubeなどのiframeって、ただコードを埋め込むだけだとレスポンシブ対応してくれないからレイアウトが崩れて困る。。画面幅に応じてきれいに表示させるにはどうしたらいいんだろ。」

こういった疑問に答えます。

本記事の内容

この記事を書いている僕は Web制作会社の元エンジニアでして、本記事の信頼担保に繋がるかと。

これを読み終わる頃には、

「iframeのレスポンシブ対応なんて余裕のよっちゃん。」

こういった状態になっていますよ。（※3分ほどでサクッと読めます。）

レスポンシブ対応したiframeの埋め込み方法【YouTubeがはみ出すのを防ぐ】

本記事をご覧のあなたもご存知のように iframeはなかなか厄介でして、 CSSなどを指定せずただ単純に コードを拾ってきて貼り付けるだけではレスポンシブ対応はされません。

なので、そうならないためには CSS等を追加で記述する必要があります。

ここで1つだけ注意したいのが、 iframeの種類によってcssで指定する値が変わるという点。なぜなら、iframeの縦横比から値を算出するから。

この値の算出方法は後ほど詳しく解説するので、一旦ここではYouTubeを例にして解説していきます。

具体的な手順が、以下のとおり。

まずは、レスポンシブ対応させたいiframeを下記のように要素で囲みます。

【HTML】

<div class="iframeWrapper">
 <iframe width="560" height="315" src="省略" ~~ ></iframe>
</div>

次に、iframe本体にCSSを当てます。指定する記述が、以下のとおり。

【CSS】

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

次に、『手順①』で記述した iframeを囲う親要素に下記のCSSを指定します。

【CSS】

.iframeWrapper {
　position: relative;
　padding-top: 56.25%;
}

ここまでの作業で、 iframe（※YouTubeの場合）のレスポンシブ対応は完了です。

例えばGoogleマップなど、 YouTube以外のiframeを埋め込む場合の値の算出方法を、この次の章で解説します。

iframeのレスポンシブ対応のポイントが、以下の2つ。

高さの指定というと heightをイメージしがちですが、ここではheightではなく『padding』を使います。というのも、 paddingの％指定＝要素の横幅に対する％という扱いになるため。

ちなみにpaddingは、 padding-left や padding-right などの水平方向の指定ではなく、 padding-top や padding-bottom などの、垂直方向の指定だという点がポイントです。

先ほどお伝えしたように、埋め込むiframeによって cssで指定する値が変わりまして、その値（padding）を算出する式が、以下のとおり。 iframeの高さ / iframeの横幅 x 100% 横幅に対する縦の比率を求めているわけですね。

というわけで、今回は以上です！初めのうちは完璧に理解できなくても、「paddingにはこんな使い方もあるんだ」ぐらいの認識で大丈夫。コードのコピペもOKなので、ぜひ本記事を有効活用していただけたら幸いです。