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で最後に小さな女の子の笑顔がたまらなく可愛くて、こちらまで幸せな気分になってしまうお気に入りの動画です。