Youtubeの埋め込み用タグでは、iframeで動画表示が行われますが、iframeにwidthとheightが入っているのでそのままではレスポンシブに対応できていません。
これをレスポンシブに対応できるようにするには、下記のようにします。
表示サンプル
単純に埋め込み用コードを埋め込んだ場合
埋め込み用コードをレスポンシブに対応させた場合
画面のサイズを変更しても、下記の動画が最適なサイズで表示されると思います。
HTMLサンプル
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/mXLntt3ikt8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
</div>
Youtube動画の埋め込み用コードはYoutubeから発行してください。
発行したiframeタグをdiv.youtubeに内包してください。
CSSサンプル
.youtube{
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
.youtubeのpadding-topを56.25%にすることで16：9の表示サイズを調整しています。
