【簡単】レスポンシブ対応されたiframeの埋め込み方法【YouTube等がはみ出すのを防ぐ】
Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ
※本サイトはアフィリエイト広告を利用しています。
【iframeのレスポンシブ対応に悩む人】
「YouTubeなどのiframeって、ただコードを埋め込むだけだとレスポンシブ対応してくれないからレイアウトが崩れて困る。。画面幅に応じてきれいに表示させるにはどうしたらいいんだろ。」
こういった疑問に答えます。
本記事の内容
- レスポンシブ対応したiframeの埋め込み方法【YouTubeがはみ出すのを防ぐ】
- iframeのレスポンシブ対応のポイント【仕組みを解説】
この記事を書いている僕は
Web制作会社の元エンジニアでして、
本記事の信頼担保に繋がるかと。
これを読み終わる頃には、
「iframeのレスポンシブ対応なんて余裕のよっちゃん。」
こういった状態になっていますよ。
（※3分ほどでサクッと読めます。）
レスポンシブ対応したiframeの埋め込み方法【YouTubeがはみ出すのを防ぐ】
本記事をご覧のあなたもご存知のように
iframeはなかなか厄介でして、
CSSなどを指定せずただ単純に
コードを拾ってきて貼り付けるだけでは
レスポンシブ対応はされません。
なので、そうならないためには
CSS等を追加で記述する必要があります。
【注意】iframeの種類によって“指定する値”が変わる
ここで1つだけ注意したいのが、
iframeの種類によってcssで指定する値が変わるという点。
なぜなら、iframeの縦横比から値を算出するから。
この値の算出方法は
後ほど詳しく解説するので、
一旦ここではYouTubeを例にして解説していきます。
具体的な手順が、以下のとおり。
- 手順①：iframeを要素で囲む
- 手順②：iframe自体にCSSを指定
- 手順③：iframeを囲う親要素にCSSを指定
手順①：iframeを要素で囲む
まずは、
レスポンシブ対応させたいiframeを
下記のように要素で囲みます。
【HTML】
<div class="iframeWrapper">
<iframe width="560" height="315" src="省略" ~~ ></iframe>
</div>
手順②：iframe自体にCSSを指定
次に、iframe本体にCSSを当てます。
指定する記述が、以下のとおり。
【CSS】
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}手順③：iframeを囲う親要素にCSSを指定
次に、『手順①』で記述した
iframeを囲う親要素に下記のCSSを指定します。
【CSS】
.iframeWrapper {
position: relative;
padding-top: 56.25%;
}
ここまでの作業で、
iframe（※YouTubeの場合）のレスポンシブ対応は完了です。
例えばGoogleマップなど、
YouTube以外のiframeを埋め込む場合の
値の算出方法を、この次の章で解説します。
iframeのレスポンシブ対応のポイント【仕組みを解説】
iframeのレスポンシブ対応のポイントが、以下の2つ。
- ポイント①：高さの指定には『padding』を使用
- ポイント②：paddingの値の算出方法
ポイント①：高さの指定には『padding』を使用
高さの指定というと
heightをイメージしがちですが、
ここではheightではなく『padding』を使います。
というのも、
paddingの％指定＝要素の横幅に対する％
という扱いになるため。
ちなみにpaddingは、
padding-left や padding-right
などの水平方向の指定ではなく、
padding-top や padding-bottom
などの、垂直方向の指定
だという点がポイントです。
ポイント②：paddingの値の算出方法
先ほどお伝えしたように、
埋め込むiframeによって
cssで指定する値が変わりまして、
その値（padding）を算出する式が、以下のとおり。
iframeの高さ / iframeの横幅 x 100%
横幅に対する縦の比率
を求めているわけですね。
というわけで、今回は以上です！
初めのうちは完璧に理解できなくても、
「paddingにはこんな使い方もあるんだ」ぐらいの認識で大丈夫。
コードのコピペもOKなので、
ぜひ本記事を有効活用していただけたら幸いです。
