動画をレスポンシブWebデザインに対応させる方法

Webサイトで動画を再生させる場合にレスポンシブWebデザインで設計されたサイトでもきちんと動画の縦横比を保ったまま表示されるようにする方法を紹介します。ここでは、YouTubeを例にレスポンシブWebデザインに対応させた動画の表示方法を見ていきます。

レスポンシブWebデザインで動画を表示させる

動画の縦横比を維持したまま画面サイズを変化させるには、パーセント指定を使っていきます。まずは、動画を表示させるボックスの横幅を100%で指定します。そして、高さについてはpaddingを使って調整します。YouTubeでは縦横比が「16:9」で画面が表示されているので、横幅の100%に対して高さを指定すれば縦横比を保ったまま表示させることができます。よって、padding-topを56.25%と指定します。

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

次にビデオを表示させるためにiframeを使っていきます。ビデオの画面は親ボックスに合わせて画面が伸縮すればよいので、幅と高さをそれぞれ100%で指定すれば表示されます。

.youtube-video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

これで、縦横比を保ったまま動画が表示されるようになるので、レスポンシブWebデザインにも対応させることができます。