【jQuery】動画を背景にフルスクリーンで表示させる「covervid.js」
フルスクリーンで表示させ、ブラウザサイズを変更しても縮尺してくれるjQueryプラグインcovervid.js。800bytesと軽量で便利なプラグインです。
covervid.min.js
Githubに公開されてますのでファイル一式をダウンロードしてください。
使い方はjqueryとダウンロードした「covervid.min.js」を</body>
の直前に読み込ませます。
Java File
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="covervid.min.js"></script>
あとはhtmlとCSSを記述して完成です。
html
<div class="covervid-wrapper"> <video class="covervid-video" autoplay loop poster="img/video-fallback.png"> <source src="videos/video.webm" type="video/webm"> <source src="videos/video.mp4" type="video/mp4"> </video> </div>
css
.covervid-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
\ Webデザインに関するお役立ち情報を定期的に配信中 /
- 【jQuery】要素をふわふわ動かすプラグイン「jqFloat.js」
- 【JS】要素の切り替え時にアニメーションエフェクトを掛けられる「animateTransition.js」
- シンプルなチャートを実装できるライブラリ「Frappé Charts」
- グラデーションのアニメーションを実装できる「Granim.js」
- 【jQuery】エフェクトが魅力的なスライダー「jQuery Hero Slider Plugin」
- WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
- 無料で使えるフリーイラスト素材サイト(商用利用可)
- 無料で使用できるフリー画像・写真素材サイト(国内/海外)
- Webデザインの参考サイト | Web Design Clip - Webデザインクリップ -
- LP・ランディングページの参考サイト | Web Design Clip [L]