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%;だけだと高さは変わらず、横だけがレスポンシブになってしまいます。これを入れることにより、縦横比を維持した状態でレスポンシブ表示する対応方法となっています。
スマホ用にちょっと手を加えた版
スマホなどのモバイルページではレスポンシブ表示して、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動画が幅いっぱいに収まっているはずです。
その他参考ページ