folderデザインしたい

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

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

YouTubeの埋め込みの縦横比を一定のままレスポンシブ対応させる方法 - https://do.gt-gt.org/iframe-responsive/

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

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

CSSを追記したり、埋め込みコードに少し変更を加える必要がありますが、難しいことはしません。紹介するコードをコピペして必要に応じて少し変更を加えるだけで完了します。

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;は左右中央寄せにするための記述です。不要の場合は削除してください。

この記事を書いた人

ガタガタ

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

関連記事

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方
folderデザインしたい favorite 53

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方
folderデザインしたい favorite 24

Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方

TwitterのタイムラインをWebサイトに埋め込む方法
folderデザインしたい favorite 12

TwitterのタイムラインをWebサイトに埋め込む方法

コピペでOK!オシャレなフォントが無料で使えるGoogle Fontsの導入方法
folderデザインしたい favorite 21

コピペでOK!オシャレなフォントが無料で使えるGoogle Fontsの導入方法

ファビコンの設定方法!サイト独自のアイコンを作ってオリジナリティアップ
folderデザインしたい favorite 26

ファビコンの設定方法!サイト独自のアイコンを作ってオリジナリティアップ

デベロッパーツールの使い方を画像付き解説!CSS編集の強力な味方にしよう
folderデザインしたい favorite 14

デベロッパーツールの使い方を画像付き解説!CSS編集の強力な味方にしよう