Blog

動画:cssでvideoを背景に使う

2015.03.24Cat:Blog video webデザイン 制作

背景に動画を設置しているサイトをよく見ると思います。

ページ全体に表示するのはcssだけでできるので、実装はかなりシンプルにできます。

videoで動画を挿入する

autoplayにしておいて、videoに対応していないブラウザの為にposterを設定しておきます。

動画素材はブラウザによって形式が異なるので、mp4、webmの2つを用意する必要があります。

各ブラウザへの対応状況は以下を参考にしてください。

mp4

http://caniuse.com/#search=mp4

webm

http://caniuse.com/#search=WebM

ファイルフォーマットの変換は編集ソフトで吐き出す際に変換できる場合もありますが、フリーのコンバーターも結構あるので探してみて下さい。

動画を背景に設定する

videoを右下に設置して、幅と高さをauto、さらに最少値をどちらも100%にします。

対応していないブラウザためにbackgroundに静止画を設置します。

 

今回使用した動画はNHKのライブラリー(フリー)から持ってきたのでかなり粗いのですが、通常背景に設置する場合はHDで撮影した動画の方が良いと思います。

 

DEMO

Author Profile

  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ