Youtube動画の埋め込み(iframe)のレスポンシブ対応【CSS】

Youtube動画の埋め込みをレスポンシブ対応する方法を2種類紹介いたします。
Youtube動画に限らず、iframeであれば可能ですので、ぜひ試してみてください。

aspect-ratioを使用する方法

まずはCSSのaspect-ratioを使用する方法です。
こちらは非常に簡単で、Youtube等から埋め込み用のiframeコードをコピーしHTMLに記述してください。そして以下CSSを記述します。

iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

上記のように、aspect-ratio: 16 / 9;とします。これはYoutube動画のアスペクト比となりますので、他のiframe等の埋め込みの際には比率を変更してください。

※CSSのaspect-ratioですが、古いブラウザ等対応していないブラウザもありますので使用する際はご注意ください。

paddingハックを使用する方法

続いてpaddingハックを使用する方法です。
paddingハックとは、コンテンツの比率を保つためpaddingで疑似的に高さなどを保つ方法です。今回は高さを保つ為padding-topを使用します。

<div class="frame">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/〇〇〇〇〇〇〇"></iframe>
</div>

まずは、上記のようにiframeを任意のブロック要素(今回はdiv)で囲います。
そしてdivにpadding-topを設定し、iframeをposition:absolute;で配置します。

.frame {
    width: 100%;
    padding-top: 56.25%; /* アスペクト比 16/9 の場合 */
    position: relative;
}
.frame iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

こちらは.frameのpadding-topでアスペクト比を設定していますので、Youtube以外の場合は必要に応じて変更してください。

さいごに

いかがでしたでしょうか。
アスペクト比さえ決まっていれば簡単にレスポンシブ対応が可能です。ぜひ覚えておきましょう。