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