ここで紹介する［Vide］は、ウェブページの背景全面で動画を再生するjQueryプラグインです。

まずはサンプルをご覧ください。

［Vide］：サンプル・サイト

使用するプラグインのダウンロードは以下、公式サイトからどうぞ。

［Vide］：公式サイト

準備として、動画ファイルをサーバー上の任意の場所に設置しておきます。
なお、動画ファイルの形式は「.mp4」をメインにして、他に「.ogv」と「.webm」形式も用意しておくと、ほぼすべてのブラウザに対応できます。

またムービーが読み込まれるまでの間に静止画を表示させておくこともできますが、この場合は同じフォルダ内に「.png」形式の同名の画像ファイルを用意しておくとプラグイン側で自動的に読み込んでくれる仕様になっています。
もし「.png」の画像が存在しない場合、続いて「.jpg」「.gif」の画像ファイルを検出します。

ここでは仮に、ルート上に「movie」というディレクトリを置き、その中に「sample」と名付けた各動画ファイルと静止画ファイルを設置します。

path/
├─ movie/
│   ├─ sample.mp4
│   ├─ sample.ogv
│   ├─ sample.webm
│   └─ sample.png

jQueryの本体ファイルと、ダウンロードしてきた［jquery.vide.min.js］をHTMLの適当な箇所で読み込みます。

<script src='jquery.js'></script>
<script src="jquery.vide.min.js"></script>

再生する動画を指定するには、HTML5のカスタムデータ属性を利用するか、jQueryで直接記述するか、どちらかの方法を選択できます。

HTML5 のカスタムデータ属性で指定する場合。

<body data-vide-bg="movie/sample">

jQueryで記述して指定する場合。

<script>
$(function(){
$('body').vide("movie/sample.mp4");
});
</script>

もし背景全体で動画が再生されない場合は？

以上の設定が完了しているにも関わらず、動画が背景全体に広がらない場合、多くはスタイルシートの記述に問題があります。

この場合、まずは「html」要素と「body」要素の横幅、縦幅、マージンをチェックしてみてください。
具体的には以下のようなCSSの設定が必要です。

html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
}

これでもダメなら「video」要素に「max-width」などが指定されているケースが予想されます。
［video］要素の横幅は指定しないようにしましょう。