Youtubeの埋め込み動画をレスポンシブ対応する！【備忘録】

こんにちは。のんです。

今回は備忘録ついでにYoutubeの埋め込み動画のレスポンシブ対応について記事にしようと思います。

私がCSSに触れるのはもしかして初めてかもしれません！

まずは結論

私はこのように対応しています。

copied.<div class="movie_wrap">
    <iframe
        width="560"
        height="315"
        src="{$url}"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
    </iframe>
</div>

copied..movie_wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

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

youtubeの埋め込み動画とは？

copied.<iframe
    width="560"
    height="315"
    src="{$url}"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

のことですね。ご自身のブログやらに埋め込むときに利用している方は多いのではないでしょうか？

iframeの問題点こそレスポンシブ対応していないこと

しかしiframeですと、そのままではレスポンシブ対応していません。

width="560"や、height="315"とあるようにそのまま貼ると固定長で、スマホのときにはみ出したり、PCのときに小さかったりします。

それを解決するためにiframeにスタイルを当てたいのですが、単純にiframeに対してwidth: 100%を当ててもレスポンシブにはなりません。

つまり、iframe自体の縦横比は固定にしたままレスポンシブにしたいということになりますね

それをするためにはiframeのサイズは常に100%にする必要があるので、

copied.iframe {
    width: 100%;
    height: 100%;
}

しかしこれでは縦に長過ぎます。

ここで、登場するのが、ラップですね。

予め、iframeを格納するレスポンシブなコンテナを用意しておいて、そいつに対して常時100%にすれば、レスポンシブ対応できるという考えです。

ですので、iframeにはposition: absolute;を追加して、

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

となります。

更にレスポンシブなコンテナはposition: absolute;なiframeを格納するので、position: relative;を設定した上でレスポンシブなwidth: 100%を当てて、

copied..movie_wrap {
    position: relative;
    width: 100%;
}

また、高さは無くしてheight: 0;、padding-bottomで表示範囲を調整します。
ちょうどいい塩梅なのが、padding-bottom: 56.25%;ですね。

copied..movie_wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

最後にoverflow: hidden;を追加して終了です。

copied..movie_wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

最後に

これはyoutubeの埋め込み以外にも使えるテクニックなのでは無いでしょうか？

すでに既出の技術かもしれませんが、備忘録ついでに書いておきました。

最近引っ越しを検討していまして、あまり技術記事が更新できずに申し訳ない...

6月中旬くらいには一段落つくので、それまでお楽しみに！

そのときはよしなに。

.