jQuery版 Webサイトの背景に動画を使用する

参考にしたサイトが少々説明が省略されていて躓いたのでそれも含めて出来るだけ簡単に書いておこうと思います。

1.bigvideo.jsの入手

http://dfcb.github.io/BigVideo.js/

2.ソースを書く

index.html

<!--bigvideo.jsに付属しているcssを読み込む-->
<script src="//code.jquery.com/jquery-2.2.0.min.js">
</script><!--jQueryを読み込む-->
<script src="//vjs.zencdn.net/5.4.6/video.js">
</script><!--video.jsを読み込む(bigvideo.jsの動作に必要)-->
<script src="common/js/bigvideo.js"></script>
<!--bigvideo.jsを読み込む--><script>
// <![CDATA[
$(function() { var BV = new $.BigVideo(); BV.init(); BV.show('movies/sample.mp4',{ambient:true});/*読み込みたいファイルを指定する*/ });
// ]]>
</script>
<div id="main">
<h1>INDEX</h1>
</div>

style.css

html, body {
margin: 0;/*これを書かないと背景に余白が出来てしまう*/
padding: 0;/*これを書かないと背景に余白が出来てしまう*/
}
body div#main {
position: relative;/*これを書かないとコンテンツが背景の上に出てこない*/
}

再生オプションとかはbigvideo本家を参照のこと。

追記:動画のロード完了までに一部気になる現象があったので、その対処法。

  • ロード前に黒画面が見える→video.jsのCSSで .video-js .vjs-tech の heightを0pxに
  • video.jsのパラメーターがテキストとして表示される→body{color:#fff}
  • video.jsのボタンが表示される→.video-wrap span{display:none;}