backgroud-size:cover みたいに動画を設定する

Question

お世話になっております。

今回の質問ですがbackgroundタグについてです。
このようなコードを記述しました。

#sample{
　　　　　　background-image: url(a.jpg);
　　　　　　background-size: cover;
　　　　　　background-position:center;
　　　　　　background-repeat: no-repeat;
　　　　　　width: 100vw;
　　　　　　height: 100vh;
　　　　　　text-align: center;
}

こうすることで、全体を覆うように拡大・縮小することができます。
そこで、今回は画像ではなく動画でやりたいと思い以下のようなコードを記述しました。

<style type="text/css">
#sample{
　　　　　　background-image: url(video/a.mp4);
　　　　　　background-size: cover;
　　　　　　background-position:center;
　　　　　　background-repeat: no-repeat;
　　　　　　width: 100vw;
　　　　　　height: 100vh;
　　　　　　text-align: center;
}
</style>

<video src="video/a.mp4" autoplay loop muted playsinline style="position:fixed;  top: 0%; bottom: 0%; margin: 0; right: 0; left: 0; z-index: 2; opacity: 0.2;" id="video"></video>

しかし、動画は表示されませんでした。imgは画像なのでもちろん動画は読みません。
やりたいこととしては、レスポンシブに動画をフルスクリーンで表示させたいと考えています。
ここで、backgroud-sizeタグと同じようにできるようなやり方について教えていただきたいです。
希望として、jQueryやJavaScripを使用したプラグインは避けたいと考えています。
よろしくお願いします。

Answer 1

動画の縦横比が変わらないのであれば、aspect-ratio の media query が使えます。

@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9)
ぴったり、あるいは、動画よりも画面が横に長くなるときは

1. 幅を100%にして width: 100%
2. video の上端を .video-container の上から50%の位置（中央）にして top: 50%
3. video の高さの半分だけ上に移動させます transform: translateY(-50%)

@media (max-aspect-ratio: 16/9)
動画よりも画面が縦に長くなるときは

1. 高さを100%にして height: 100%
2. video の左端を .video-container の左から50%の位置（中央）にして left: 50%
3. video の幅の半分だけ左に移動させます transform: translateX(-50%)

<style>
  .video-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  video {
    position: absolute;
  }
  @media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
    video {
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  @media (max-aspect-ratio: 16/9) {
    video {
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
</style>
<div class="video-container">
  <video autoplay loop>
    <source src="https://s3-ap-northeast-1.amazonaws.com/hoo-assets/708213662.mp4">
  </video>
</div>

こちらで動作の確認ができます。
Chrome (Win, Mac), Firefox (Win, Mac), IE11 (Win), Edge (Win) では、大丈夫でした。
モバイルは自動再生できないので静画になっちゃいますが、cover な感じで出ます。
https://s3-ap-northeast-1.amazonaws.com/hoo-assets/background-size-cover-for-video.html

codepen版です。
https://codepen.io/hoo-chan/pen/eMdVMv

Comments

[kuroishi]

ありがとうございました。スムーズに解決することができました！

[defghi1977]

ああ, なるほど「backgroud-size:cover ”みたい”に動画を設定」したかったわけですね

[kuroishi]

説明不足で申し訳ありません。これが一番自分に近い答えでした。ご回答いただきありがとうございます！

Answer 2

とりあえず、

• セレクタのID名が間違っている
• 全角スペースを使っている

を修正して、object-fitを使うのはいかがでしょうか。
object-fit - CSS | MDN

#video{
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}

対応ブラウザに難アリです。
Can I use... Support tables for HTML5, CSS3, etc

Answer 3

希望として、jQueryやJavaScripを使用したプラグインは避けたいと考えています。

残念ながら不可能です. そもそもCSSに動画を背景画像に設定する仕組みそのものが存在しません.が, 幾つかの代替案を提示します.

• FireFoxに限り-moz-element関数を用いて任意のノードをCSS背景とすることが可能です. これをvideo要素に設定すればよいでしょう.

• JavaScriptの利用を許すのであれば, Safariでは-webkit-canvas(id)関数とdocument.getCSSCanvasContextメソッドを用いてcanvasグラフィックのように背景画像を描くことが可能です. この仕組みを用いてvideo映像を背景画像に転写します.

• HTMLの構造に手を入れてよいのであればvideo要素をCSSを使って特定のノードの後ろに配置する方法があります.