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" allowfullscreen loading="lazy"></iframe>
</div>

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

予備動画 1 2

レスポンシブ対応するCSS

最近のaspect-ratioを使用する方法

以前はpadding-top: 56.25%;を使って16:9の縦横比（アスペクト比）に合わせてレスポンシブ対応していましたが、ここ最近ではaspect-ratioがほとんどのモダンブラウズで使えるようになり、簡単にできるようになったみたいです。

ソース例

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

または

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

後述の従来のposition: relative;とposition: absolute;とpadding-top: 56.25%;を組合せて使うより簡単でいいですね。

参考サイト

aspect-ratioとobject-fit: cover;について、以下のページが参考になりました。

ブラウザの対応状況

従来のpadding-top: 56.25%;を使用する方法

You-Tubeの埋め込みのサイズでよくあるwidth="560" height="315"の指定があってもページ幅最大に動画を表示するaspect-ratioを使わない従来の方法。PCの場合、サイトの作りによっては幅いっぱいに大きく表示されるようになります。スマホなどは適度な大きさで画面幅に合わせたレスポンシブ表示されます。aspect-ratioを使用するより、コードが多いのですが、IEなど古いブラウザ対応が必要な場合はこちらを使うことが必要になります。

ソース例

.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%;は16:9の幅16を100％にしたときの高さ9がナンバーセントの比率かを意味するかを意味しています。以下のページが参考になります。これを入れないと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動画が幅いっぱいに収まっているはずです。

その他参考ページ