CSSでYouTube動画埋め込み時、固定比設定にする方法！【アスペクト比】

どうも、Tommy(@SitommyBlog)です。

今回はですね、よくサイトなどにYouTube動画を埋め込むときでレスポンシブ対応にしたことがあるかと思います。

比率を保ったままレスポンシブ対応をするためのCSSを紹介していきたいと思います。

埋め込みコードを取得

そもそもYouTube動画を埋め込む方法を知らない方に軽く紹介していきます。

YouTube画面の右下あたりにGoodボタンとBadボタンがあるかと思います。
その隣の欄から埋め込みコードを取得できます。

『共有 → 埋め込む』と選択してください。
すると、

こちらをコピペして、HTML上に貼り付ければ完了となります。
YouTube埋め込み時の設定もそれなりにありますが、ここでは紹介しませんのでご了承ください。

じぃじ

コントロールバーなどの非表示なども設定出来るぞ！

CSSでアスペクト比を設定する

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/動画パス" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

埋め込みコードを新しくタグで囲みましょう。ここでは、クラス名を『video』としました。

.video{
height: 0;
overflow: hidden;
padding-bottom: calc(315 / 560 * 100%);
position: relative;
}
.video iframe{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}

『padding-bottom』は、『padding-top』として設定しても問題ないです。

また、『calc(315 / 560 * 100%)』この計算式は、『iframe』の『高さ ÷ 幅 × 100%』の計算式です。

つまり、計算すると『56.25%』になるので、そのまま数値を入れても問題ないです。

.video{
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}

動画に関しては、比率を維持することがとても重要なケースがありますので、『56.25% = 16:9』の比率になると思っていていいと思います。

じぃじ

例えば、4:3の比率にしたい場合は『75%』と指定すると出来るぞ！

たから

9/16 × 100 = 56.25
3/4 × 100 = 75
ってことだね！

まとめ

最近では、Webサイトにyoutube動画を埋め込むケースが多くなっていますので、この方法を覚えておくと重宝します。

動画は、比率を保っていないと黒い縁がでてしまうのでレスポンシブ対応時は気をつけましょう。

また埋め込みで、Google Mapもよく使いますが、こちらに関して任意でサイズを決めますので特に必要はないかなっと思いますが、比率で問題がでた際は同じように設定すればいいでしょう。