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

css

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

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

1
2
3
4
5
<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>
1
2
3
4
5
6
7
8
9
10
11
12
.youtube_wrapper {
max-width:●px;
margin:0 auto;
}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

▲