[html css]ユーチューブをレスポンシブに埋め込む方法

ユーチューブをサイトに埋め込むまではできるけどレスポンシブ対応されなく、みきれてしまう。。

このような疑問に答えます！

本記事ではhtmlcssのみでレスポンシブにユーチューブを埋め込む方法についてコードペンで紹介します。

以下コードペンデモです

See the Pen YouTube埋め込み by Kohei (@kouk05) on CodePen.0

上記html、cssをコピペして表示を確認してください。
スマホ時も見切れる事無くレスポンシブに表示されたかと思います。
.VideoWrapperに指定しているpadding-bottom: 56.25%;が肝でアスペクトを計算し縦横比を維持したままデバイス可変に対応してます。
以下参考サイト様で横幅、縦幅の入力値（埋め込むユーチューブの縦横値）元に計算しアスペクト比を出してくれるのでこちらを元にpadding-bottomの値を変更してくだい。
https://aspect.arc-one.jp/