ミギムキ

[CSS] GoogleマップやYoutubeを縦横比率を合わせつつ幅いっぱいに表示したい

公開日:2018/10/07 更新日:2018/10/10

やりたいこと

GoogleマップやYoutubeをサイト内に貼り付けるための埋め込みコードは、iframeというタグで囲われたものになっています
単純にこのコードを貼り付けると、サイズが固定されてしまい、サイトの横幅に合いません
そんなときに便利なiframeのサイズを最適化するためのスタイルをご紹介します

サンプルコード

html

<div class="if_wrapper">
    <!-- 設置コード ->
</div>

CSS

.if_wrapper {
    position: relative;
    padding-bottom: 56.25%;
}
.if_wrapper > iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

仕組み、解説、補足など

padding-topには、設置するiframe要素の縦横比に合わせて設定します
GoogleマップやYoutubeは16:9のため、9 / 16 = 0.5625で56.25%を設定しています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。