【Vide】背景動画を簡単に実装できるjQuery

HTML・JavaScript..

2021.02.17

こんにちは、ハル@haru_elpisです。

ウェブページの背景をすぐ動画再生できるjQueryプラグインの紹介です。

Videとは

背景に動画を表示する事ができ拡張子は、mp4、ogv、webmに対応しています。一つのフォルダに拡張子の前のファイル名を同じにして入れておけば、環境に合わせて勝手に読み込んでくれます。

ダウンロード

Vide

Easy as hell jQuery plugin for video backgrounds.

ダウンロードした「jquery.vide.min.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.vide.min.js"></script>

HTML

body data-vide-bg="path/video">

JavaScript

$("#yourElement").vide({
    volume: 1,　//音量設定
    playbackRate: 1,　//再生速度設定
    muted: true,　//ミュート設定
    loop: true, //ループ設定
    autoplay: true, //オート設定
    position: "50% 50%" // 配置設定
});