[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid
Post on:2014年11月10日
sponsors
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。
CoverVidのデモ
デモでは、ヘッダセクションの背景いっぱいに動画が配置されています。
単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。
CoverVidの使い方
Step 1: 外部ファイル
当スクリプトとjquery.jsを外部ファイルとして記述します。
<body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="covervid.min.js"></script> </body>
Step 2: HTML
動画を背景として表示する親要素、もしくはラッパーを配置します。
<div class="covervid-wrapper">
<video class="covervid-video" autoplay loop poster="img/video-fallback.png">
<source src="videos/clouds.webm" type="video/webm">
<source src="videos/clouds.mp4" type="video/mp4">
</video>
</div>
親要素内には、通常通りに別の要素を配置することができます。
<div class="covervid-wrapper">
<video class="covervid-video" autoplay loop poster="img/video-fallback.png">
<source src="videos/clouds.webm" type="video/webm">
<source src="videos/clouds.mp4" type="video/mp4">
</video>
<h1>見出し</h1>
<p>テキスト</p>
</div>
Step 3: JavaScript
jQueryのセレクタで背景を表示する要素を指定し、スクリプトを実行します。
.covervid-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
スクリプトのオプションでは表示位置やサイズを指定できます。
要素内全体に表示する時は、上記のままでOKです。
sponsors
