iframeで埋め込むEmbedな動画を画面いっぱいにCSSだけでレスポンシブ対応で表示させる方法

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

# はじめに

## 目的

[YouTube](https://developers.google.com/youtube/player_parameters?hl=ja)や[Vimeo](https://help.vimeo.com/hc/ja/articles/360000710167-%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%83%97%E3%83%AC%E3%83%BC%E3%83%A4%E3%83%BC%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E8%AA%BF%E6%95%B4)や[Dailymotion](https://developer.dailymotion.com/player)などの動画をウェブサイトに埋め込む時には、`<iframe>`で埋め込む方法が最も一般的かと思います。

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

## 前提条件

[メディアクエリとJavaScriptを駆使した方法](https://qiita.com/hoo-chan/items/a5d95679350387755625)や[jQueryを駆使した方法](https://qiita.com/drasky1132/items/93ab71742175914e61cb)の記事がありますが、JavaScriptを一切使わず、シンプルなCSSだけで実現します。

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

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

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

## TL;DR

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

## HTML & CSS

### HTML

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

### CSS

```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

<p data-height="379" data-theme-id="0" data-slug-hash="wxwWJo" data-default-tab="css,result" data-user="kulikala" data-embed-version="2" data-pen-title="Embedded Responsive Video" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/kulikala/pen/wxwWJo/">Embedded Responsive Video</a> by Kazuyuki Namba (<a href="https://codepen.io/kulikala">@kulikala</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## CSSのポイント

この方法の肝は、`padding-bottom: 56.25%`です。
2009年のこの記事：[Creating Intrinsic Ratios for Video](http://alistapart.com/article/creating-intrinsic-ratios-for-video)が有名です。

`margin-top`、`margin-bottom`、`padding-top`、`padding-bottom`を`%`で指定すると、**親要素のコンテンツ幅**にパーセンテージが乗じられた値が計算される仕様とのこと。
詳しくは、[レスポンシブWebデザインでハマりがちな%指定](http://design-spice.com/2014/03/24/percentag/)を参照ください。

# 背景動画にする場合

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

## HTML & CSS

### HTML

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

### CSS

```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

<p data-height="265" data-theme-id="0" data-slug-hash="VBZKYj" data-default-tab="css,result" data-user="kulikala" data-embed-version="2" data-pen-title="Covered-size Embedded Video" class="codepen">See the Pen <a href="https://codepen.io/kulikala/pen/VBZKYj/">Covered-size Embedded Video</a> by Kazuyuki Namba (<a href="https://codepen.io/kulikala">@kulikala</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 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](https://stackoverflow.com/questions/33451481/scale-and-reposition-iframe-like-background-size-cover) を参考にしました。