YouTube動画の埋め込みをレスポンシブに対応させるCSS

2021年01月19日 2021年01月28日

こんにちはレオです。

いろんな案件をコーディングしていると度々YouTubeの埋め込み動画をレスポンシブに対応させるCSSを書くことがあり、その都度忘れてしまうので、備忘録として残しておきます。

結論

下記記述でOKです。

<div class="youtube">
<!-- YouTubeの埋め込みコード -->
  <iframe width="853" height="480" src="//www.youtube.com/embed/d6SSnbVCmEg" frameborder="0" allowfullscreen></iframe>
</div>

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

人気記事