Javascript

【Javascript】動画をフルスクリーン背景に設定することができるスクリプトVidage

September 23, 2018
Vidage

Vidage.jsは動画をフルスクリーン背景に設定することができるスクリプト。タッチデバイスや幅の狭いデバイス(34em)では動画を非表示にし、代替画像を表示します。

How to use

.webm.mp4フォーマットを追加する必要はありません。

<div class="Vidage">
    <div class="Vidage__image"></div>

    <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted>
        <source src="videos/bg.webm" type="video/webm">
        <source src="videos/bg.mp4" type="video/mp4">
    </video>

    <div class="Vidage__backdrop"></div>
</div>

スタイルを追加

<link href="styles/Vidage.css" rel="stylesheet" />

Regular way

<script src="scripts/Vidage.js"></script>
<script>
    new Vidage(selector);
</script>

ES6 way

import Vidage from './Vidage';

new Vidage(selector);

Options

Example:

import Vidage from './Vidage';

// Default options that you may change
new Vidage(selector, {
    helperClass: 'Vidage--allow',
    videoRemoval: false
});