フロントのエンド

Web開発をがんばりたいブログ

CSS

全画面の映像背景で background-size: cover 的な処理をCSSだけで

by:
16/09/02

404ページを実装するときに背景はビデオにしようと思いまして。

で、ビデオにしたわけですけども、videoで呼んできた映像を全画面で見切れずに、かつセンタリングされている状況、つまりは、 background-size: cover ってどうしたらええんや?と詰まったので、調べたところ…

See the Pen Emulating background-size: cover for HTML5 video (CSS only) by Shaw (@shshaw) on CodePen.

codeがpenされてましたね。助かる。

codepenのコードは肝心のビデオがリンク切れてるけども、コード自体はしっかりと動いております。

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

実際センタリングに使っているのは、お馴染みのtransformでやるパターンのやつでした。

はい。

ページローディング時の対応とか、フワッと表示とか、その辺はしっかり組み込むか、ライブラリを呼んでくるのが話しが早そうですね。

jquery-background-video

コメントを残す