【コピペで使える】YouTube動画埋め込み時にアスペクト比（縦横比）を固定する方法

スマートフォン対応をしているレスポンシブデザインのウェブサイトにおいて、YouTube動画を綺麗に埋め込むというのは実はなかなか難しかったりします。

通常のYouTube動画の埋め込みタグでは、iframeのwidth・heightに固定の数値が入っていますので、PC画面に合わせればスマートフォン表示で横幅がおさまりきらず、スマートフォン画面に合わせれば表示が小さくなってしまいます。

かといってiframeのwidthを可変の100%指定にしても高さが変わらずに、横長になったり縦長になったりします。

今回はそんなYouTube動画の埋め込みでお悩みの方に、レスポンシブデザインで動画表示領域の縦横比（アスペクト比）を固定するための実装方法について紹介します。
 

サンプル表示

 
まずは上記サンプルをブラウザの幅を大きくしたり、小さくしたりしながら表示を確認してみてください。

しっかりとプレイヤーの縦横比が維持されていることがわかるかと思います。

以下にこれを実現するための手順を具体的に解説します。
 

YouTube動画の縦横比保持の手順

HTML部

<div class="yt-wrapper"><iframe src="https://www.youtube.com/embed/rSFDcx-1p4Y" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe></div>

youtube埋め込みタグのwidth・height属性を削除して、iframeをyt-wrapperクラスのdivタグで囲みます。

CSS部

.yt-wrapper {
  position: relative;
  width: 100%;
}
.yt-wrapper:before {
  content:"";
  display: block;
  padding-top: 56.25%;
}
.yt-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

上記CSSを設定すれば完了です。