YoutTubeの埋め込みIFLAMEをレシポンシブ対応するCSS

モバイルページではYouTubeの画面がはみ出る

最近はページにYouTubeの動画を埋め込むことが増えてきました。スマホでそのページを見たときに動画の画面がはみ出ていたので自動的に幅に合わせて表示を変えてくれるレシポンシブに対応する方法を探しました。

CSS（スタイルシート）で簡単にできることがわかったのでメモ。

まずは埋め込みタグを<DIV>で囲む

YouTubeの埋め込みタグを以下のように<div class="youtube"></div>で囲みます。

ついでにloading="lazy"を加えて遅延表示対応しています。

<div class="youtube">
<iframe width="560" height="315" src="//www.youtube.com/embed/j1fyn12NH5s" frameborder="0" allowfullscreen loading="lazy"></iframe>
</div>

ちなみに以下の動画は随分前の森永ミルクキャラメルのCMで最後に小さな女の子の笑顔がたまらなく可愛くて、こちらまで幸せな気分になってしまうお気に入りの動画です。

レシポンシブ対応するCSS

最低限のシンプル版

width="560" height="315"の指定があってもページに幅最大に動画を表示します。PCの場合、サイトの作りによっては幅いっぱいに大きく表示されるようになります。スマホなどは適度な大きさで画面幅に合わせたレシポンシブ表示されます。

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }

4:3の場合 padding-bottom: 75%;
16:9の場合 padding-bottom: 56.25%;
padding-bottomはpadding-topでも可。

padding-bottom: 56.25%;が何を意味するか疑問に思うかもしれませんが、以下のページにヒントがあります。これを入れないとwidth: 100%;だけだと高さは変わらず、横だけがレシポンシブになってしまいます。これを入れることにより、縦横比を維持した状態でレシポンシブ表示する対応方法となっています。

youtube 動画の埋め込みをcssでレスポンシブ対応する方法 - ham media memo

https://h2ham.net/youtube-responsive/

スマホ用にちょっと手を加えた版

スマホなどのモバイルページではレシポンシブ表示して、PCなどは大きくなりすぎないように、埋め込みコードの指定通りwidth="560" height="315"で表示する場合の例です。私の場合、埋め込みコードの幅560ピクセルに合わせて、最大559ピクセルまでの解像度でアクセスした場合はレシポンシブ表示するようにしました。

@media screen and (max-width:559px){
   .youtube {
	   position: relative;
	   width: 100%;
	   padding-top: 56.25%;
	   margin: 0.5em 0 1em;
   }
   .youtube iframe {
	   position: absolute;
	   top: 0;
	   right: 0;
	   width: 100% !important;
	   height: 100% !important;
   }
}

動画を連続して埋め込んだときのためにmargin: 0.5em 0 1em;を加えて、上下に余白を入れて動画同士の間に隙間を作るようにしました。

試しにこのページを560px以下の解像度のスマホで見ていただければYouTube動画が幅いっぱいに収まっているはずです。

その他参考ページ

youtubeの埋め込み動画をレスポンシブに対応させる方法 | webclips

https://design.webclips.jp/youtube-movie-size/

[youtube] iframeのレスポンシブ対応 - qiita

https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c