YouTube埋め込みのレスポンシブ

勉強させてもらったサイト

• YouTube 動画埋め込みのレスポンシブ対応方法 – by Takumi Hirashima

埋め込みタグの方はいじらなくていい

<div class="youtube_wrapper">
<div class="youtube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/cKf4cqx3MXQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>

.youtube_wrapper {
max-width:●px;
margin:0 auto;
}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}