YouTubeやGoogleマップをWebサイトに埋め込む際にiframe要素を使います。
iframeとはinline frameの略称で、インラインフレームやアイフレームと呼び、src属性で指定したURL先の内容をHTML中に埋め込んで閲覧できる要素です。
他のHTML要素と違い少し特殊な要素になるので、初めてiframe要素を扱う方は注意が必要です。
注意しておきたいポイントは3点
- 別ページのHTMLを読み込むため、記述したHTMLとブラウザで表示されるHTMLは大きく異なる
- iframe要素は幅と高さを持たないので、必ず幅と高さを指定する必要がある
- iframe要素で読み込んだ他ページに、読み込み元ページからCSSを適用することはできない
レスポンシブ表示に対応する
iframe要素のレスポンシブ表示対応を紹介します
横幅のみ可変するようにする
Googleマップの埋め込みコードは以下のようになります。
1 | <iframe src="https://www.google.com/maps/〜〜〜" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> |
横幅のみ可変させる場合はCSSでwidthを調整します。
1 2 3 | iframe{ width: 100%; } |
縦横比率を保ちつつレスポンシブ表示にする
YouTubeを埋め込む際によく使うのが、縦横比率を保ったままレスポンシブ表示する方法です。
YouTubeの埋め込みコードをdiv要素で囲みます。
1 2 3 | <div class="iframeWrapper"> <iframe width="560" height="315" src="〜〜" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> |
CSSは以下のように設定します
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .iframeWrapper{ position: relative; } .iframeWrapper::before{ content: ""; display: inline-block; padding-top: 56.25%; } .iframeWrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
ポイントは擬似要素のbeforeを使う部分です。beforeに指定したpadding-topが横幅に対するアスペクト比を保ってくれます。
なぜならpaddingの単位を%にすると、包含ブロックの横幅を基準するからです。
動画は16:9が主流なので、56.25%にしています。
1 2 3 4 5 | .iframeWrapper::before{ content: ""; display: inline-block; padding-top: 56.25%; } |
beforeで作った16:9のスペースに、iframe要素を重ねていきます。
縦横幅の指定を100%にすることで、作ったスペースにぴったり合うようにしています。
1 2 3 4 5 6 7 | .iframeWrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
まとめ
iframe要素は最初理解するのが大変です。
一度扱えるようになると、実装で困ることがとても少なくなるのでぜひ試してみてください。
