[JS]簡単で高性能!動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js

動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。

Bideoはおそらく、Background Videoの略でしょうかね。

サイトのキャプチャ

Bideo.js
Bideo.js -GitHub

Bideo.jsのデモ

デモでは、動画が背景としてブラウザいっぱいに配置されています。

デモのキャプチャ

デモページ

動画の背景の上には、通常のページのようにHTMLのさまざまな要素を通常通りに配置することができます。

レスポンシブにも完全対応で、表示サイズを変更してもちょうどいい位置に動画が配置されます。

デモのアニメーション

デモページ: リサイズ

Bideo.jsの使い方

Step 1: 外部ファイル

当スクリプトをbodyの最下部に記述します。

「main.js」はオプションを記述するファイルです。

Step 2: HTML

video要素と空のdiv要素を用意し、その後にコンテンツを通常通りに配置します。

Step 3: CSS

動画配置用のスタイルシートです。
あとは、コンテンツ用のスタイルシートを記述します。

Step 4: 動画の設定

動画の設定は、「main.js」に記述します。

top of page

©2017 coliss