YouTube動画をページに埋め込むときのCSS

完成形

親要素の横幅いっぱいに動画が表示されます。レスポンシブ対応なのでスマホやタブレットでも適切な大きさで表示されます。

HTML

埋め込みたい動画のHTMLを「共有」→「埋め込む」から取得し、「movie-wrap」クラスを指定した<div>タグなどで囲みます。


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

CSS

CSSに「movie-wrap」クラスと「movie-wrap内のiframe」のスタイルを追加します。


.movie-wrap{
  width:100%;
  height: 0;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
}

.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}