[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid

.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量(800bytes)プラグインを紹介します。

サイトのキャプチャ

CoverVid
CoverVid -GitHub

CoverVidのデモ

デモでは、ヘッダセクションの背景いっぱいに動画が配置されています。

デモのキャプチャ

デモページ

単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。

CoverVidの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部ファイルとして記述します。

<body>
  ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="covervid.min.js"></script>
</body>

Step 2: HTML

動画を背景として表示する親要素、もしくはラッパーを配置します。

<div class="covervid-wrapper">
    <video class="covervid-video" autoplay loop poster="img/video-fallback.png">
        <source src="videos/clouds.webm" type="video/webm">
        <source src="videos/clouds.mp4" type="video/mp4">
    </video>
</div>

親要素内には、通常通りに別の要素を配置することができます。

<div class="covervid-wrapper">
    <video class="covervid-video" autoplay loop poster="img/video-fallback.png">
        <source src="videos/clouds.webm" type="video/webm">
        <source src="videos/clouds.mp4" type="video/mp4">
    </video>
    <h1>見出し</h1>
    <p>テキスト</p>
</div>

Step 3: JavaScript

jQueryのセレクタで背景を表示する要素を指定し、スクリプトを実行します。

.covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

スクリプトのオプションでは表示位置やサイズを指定できます。
要素内全体に表示する時は、上記のままでOKです。

sponsors

top of page

©2018 coliss