Youtube動画をレスポンシブで埋込

YOUTUBE動画貼り付けが便利になりました。

まずは貼り付け

いつも通りソースを記入してクラスをつけます。

<div class="youtube">
     ifameで始まるyoutubeのURL
</div>

cssを追加

「aspect-ratio: 16/9;」でコンテナを16:9に設定して終了。

.youtube {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube iframe {
width: 100%;
height: 100%;
}

無理な場合は

ブラウザによって対応状況があるので、無理な場合はいつものpaddingのヤツで調整。

.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}