画像の場合、background-image: url()にbackground-size: coverを指定することで、領域いっぱいに拡縮して画像が表示されるようにすることができます。

はじめに

目的

YouTubeやVimeoやDailymotionなどの動画をウェブサイトに埋め込む時には、<iframe>で埋め込む方法が最も一般的かと思います。

<iframe>で埋め込む動画を、background-size: coverのように領域いっぱいに拡大・縮小させて、レスポンシブに対応させてみたいと思います。

前提条件

メディアクエリとJavaScriptを駆使した方法やjQueryを駆使した方法の記事がありますが、JavaScriptを一切使わず、シンプルなCSSだけで実現します。

なお、この記事で埋め込む動画のアスペクト比はすべて16:9であることを想定してパラメータ値を書いています。
異なるアスペクト比の場合、適切にパラメータを計算し直してください。

ページの一部に埋め込む場合

<iframe>を配置する要素の大きさを、親要素の大きさに合わせたい時の方法です。
もちろんレスポンシブにします。

TL;DR

このサイトを使って、埋め込みコードを作るのが正解です。
http://embedresponsively.com/

HTML & CSS

HTML

<div class="embed-container">
  <iframe src="https://player.vimeo.com/video/66140585" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

CSS

.embed-container {
  height: 0;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%; /* 16:9 の高さなので 56.25% (= 9 ÷ 16) */
  position: relative;
}

.embed-container iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

コードは http://embedresponsively.com/ のものをそのまま使っています。

CodePen

See the Pen Embedded Responsive Video by Kazuyuki Namba (@kulikala) on CodePen.

CSSのポイント

この方法の肝は、padding-bottom: 56.25%です。
2009年のこの記事：Creating Intrinsic Ratios for Videoが有名です。

margin-top、margin-bottom、padding-top、padding-bottomを%で指定すると、親要素のコンテンツ幅にパーセンテージが乗じられた値が計算される仕様とのこと。
詳しくは、レスポンシブWebデザインでハマりがちな%指定を参照ください。

背景動画にする場合

<iframe>にposition: absoluteまたはposition: fixedを設定して背景動画にしたい時の方法です。
この場合、領域を埋めるように動画を拡大して表示するので、動画のはみ出た領域は見えなくなります。

HTML & CSS

HTML

<div class="embed-container">
  <iframe src="https://player.vimeo.com/video/66140585" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

CSS

.embed-container {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed; /* fixed の場合。absolute でも同じ */
  right: 0;
  top: 0;
}

.embed-container iframe {
  box-sizing: border-box;
  height: 56.25vw; /* 16:9 の高さなので 56.25% (= 9 ÷ 16) */
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh; /* 16:9 の幅なので 177.77% (= 16 ÷ 9) */
}

CodePen

See the Pen Covered-size Embedded Video by Kazuyuki Namba (@kulikala) on CodePen.

CSSのポイント

この方法の肝は、

height: 56.25vwで画面領域の横幅vwに対する割合で高さを決めている
width: 177.77777778vhで画面領域の高さvhに対する割合で横幅を決めている
min-height: 100%で領域の高さいっぱいになるように設定している
min-width: 100%で領域の横幅いっぱいになるように設定している

この4つの指定を満たしつつアスペクト比を崩さないようブラウザが動画を描画してくれるので、領域をcoverするサイズになります。

後は、left: 50%、top: 50%でズラした後、transform: translate(-50%, -50%)で真ん中に移動して、映像の中央が表示されるように調整しています。

この記事は、StackOverflowの記事 Scale and reposition iframe like background-size: cover を参考にしました。