ごく簡単に背景に動画を流せるjQueryプラグイン「Vide」

背景に動画を流しているサイトが増えてきましたよね。
これを簡単に実現できるjQueryプラグインVide - easy as hell jQuery plugin for video backgroundsを紹介します。
ごく簡単に背景に動画を流せるjQueryプラグイン「Vide」サンプル

使用方法
Vide - easy as hell jQuery plugin for video backgroundsからファイル一式をダウンロード。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.vide.js"></script>

上記を記述したら、あとは動画mp4、webm(動作しないブラウザ用にjpgも可)を表示したい場所に記載します。
<body data-vide-bg="ocean">
今回は全体の背景に埋め込みたいので、bodyにしています。
なおパスで指定なので、所定の位置に関連ファイル一式アップしておくとよいでしょう。
path/
├── to/
│ ├── video.mp4
│ ├── video.ogv
│ ├── video.webm
│ └── video.jpg

また、オプションは下記のように設定します。
data-vide-options="loop: false, muted: false, position: 0% 0%"
mp4が再生されない場合はhtaccessで以下を設定してみましょう。
AddType video/mp4 MPEG-4 media mp4
ごく簡単に背景に動画を流せるjQueryプラグイン「Vide」サンプル

sponsors

「ごく簡単に背景に動画を流せるjQueryプラグイン「Vide」」をシェアする

記事作成:
記事URL:

TOP > > > ごく簡単に背景に動画を流せるjQueryプラグイン「Vide」