YouTubeの埋め込みの縦横比を一定のままレスポンシブ対応させる方法

YouTubeはiframeタグを利用して自分のサイトに埋め込むことが可能です。しかし、埋め込みコードを発行してそのまま利用すると、レスポンシブ対応がされていないため端末によっては埋め込み部分がはみ出てしまったり、逆に小さすぎて余白が気になったりする場合があります。

そこでこの記事では、YouTubeの埋め込みをレスポンシブ対応させる方法を紹介します。

STEP1：埋め込みコードのサイズ指定部分を削除する

「埋め込みコードのサイズ指定」とは、この部分です。

削除するのは、width="560" height="315"の部分です。widthが横の大きさ、heightが縦の大きさを表していますが、このコードが入ったまま埋め込みコードを貼り付けると、どんな端末でも指定された大きさのまま表示されるので、この部分は削除します。

ちなみに、Youtubeの埋め込みコードのサイズはデフォルトで560:315に設定されているようですが、これは横16：縦9の縦横比です。

STEP2：classを追記する

iframeタグの中に、適当なclassを追記します。今回埋め込む動画は横16、縦9の比率で埋め込みたいので、class名はyoutube-16-9にします。

<iframe class="youtube-16-9" ...（中略）...>

class名は好みや必要に応じて変更してかまいません。

STEP3：CSSを追記する

CSSに、以下のように追記します。

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

aspect-ratioの部分で縦横比を指定しています。縦横比を別の数値にしたい場合は、16/9の部分を必要に応じて書き換えればOKです。

ちなみに、埋め込みのサイズが大きくなりすぎないように上限を設けたいという場合は、以下のようにすればOKです。

iframe.youtube-16-9 {
width: 100%;
height: auto;
aspect-ratio: >16 / 9;
max-width: 600px;
display: block;
margin: auto;
}

max-width: 600px;の部分で最大の横幅を指定しています。600pxの値は好みに応じて変更してください。

display: block; margin: auto;は左右中央寄せにするための記述です。不要の場合は削除してください。

この記事を書いた人

ガタガタ

このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。

• 
•