HTML/CSS

【レスポンシブ対応】YouTube動画を埋め込む方法

Youtube動画をサイトに埋め込みスマホとパソコンで見た時に見え方が異なったり、表示崩れが起きてしまったことがあるという人は多いのではないでしょうか。

こちらの記事では、Youtube動画をレスポンシブ対応で埋め込む方法について解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

サンプル

先輩くん
先輩くん
以下のYoutube動画はレスポンシブ対応しているものになります

Youtube動画をレスポンシブで表示させる手順

先輩くん
先輩くん
実際にYoutube動画をレスポンシブで表示させる手順について解説するね
後輩ちゃん
後輩ちゃん
よろしくお願いします!

表示させたいYoutube動画の情報を取得する

Youtube iframe情報取得

埋め込みたいYoutube動画ページの共有をクリックし、iframeタグに記載されている情報をコピーします。

以下のコードはサンプルで埋め込みをしたYoutube動画の埋め込み情報になります。
<iframe width="560" height="315" src="https://www.youtube.com/embed/eNfFRNsmnj8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

取得した情報をソースコードに貼り付ける

先程取得したiframeタグを埋め込みたい箇所に貼り付けます。

この状態で表示を確認するとYoutube動画が表示されていますが、レスポンシブ対応していないためブラウザを縮小させると表示崩れが発生します。

先輩くん
先輩くん
検証ツール(F12)を開いた状態にすると簡単にブラウザ幅を縮小させることができます

次のステップでcssを使ってレスポンシブ対応させるため、divタグでiframeタグを囲います。

以下のコードでは、divタグにyoutube-responsiveのクラスを付与しています。
<div class="youtube-responsive">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/eNfFRNsmnj8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

cssでレスポンシブ対応させる

最後に埋め込んだYoutube動画にレスポンシブ対応させるため、以下のcssを設定します。
.youtube-responsive{
	position:relative;
	width:100%;
	padding-top:56.25%;
}

.youtube-responsive iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}

レスポンシブ対応させるために一番重要なポイントはpadding-topに指定している値です。

この値は表示させる動画のアスペクト比によって算出される値を設定します。

上記のコードではpadding-topに56.25%の値を設定していますが、この数値は16:9のアスペクト比によって算出された値になります。

計算式

(画像の高さ / 画像の横幅) × 100

例えば4:3のアスペクト比でYoutube動画埋め込みたい場合は(3/4)*100で算出された75%をpadding-topの値に設定します。

続いてiframeに設定をします。iframeを囲っているdivタグのpadding-topに値を設定したためこのままの状態だとdivタグの外に弾かれてしまうためposition:absoluteを使って、divタグ内に入れるように設定します。

先輩くん
先輩くん
親要素のdivタグにposition:relativeを設定することを忘れないよう気を付けよう

まとめ

今回はYouTube動画をレスポンシブ対応で埋め込む方法について解説しました。

重要なポイントを忘れないようおさらいを兼ねて下記にまとめました。

復習ポイント

  • Youtube動画のiframe情報だけでは表示崩れが発生する場合がある
  • padding-topの値にはアスペクト比によって算出された値を設定する

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村