[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js

サイト構築 -JavaScript

Post on:2016年5月25日

Bideo.jsのデモ

デモでは、動画が背景としてブラウザいっぱいに配置されています。

デモページ

動画の背景の上には、通常のページのようにHTMLのさまざまな要素を通常通りに配置することができます。

レスポンシブにも完全対応で、表示サイズを変更してもちょうどいい位置に動画が配置されます。

デモページ: リサイズ

Bideo.jsの使い方

Step 1: 外部ファイル

当スクリプトをbodyの最下部に記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="bideo.js"></script>
  <script src="main.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

「main.js」はオプションを記述するファイルです。

Step 2: HTML

video要素と空のdiv要素を用意し、その後にコンテンツを通常通りに配置します。

<body>
 <div id="container">
    <video id="background_video" loop muted autoplay></video>
    <div id="video_cover"></div>
    <div id="overlay"></div>

    <section id="main_content">
      ...
      コンテンツ
      ...
    </section>
  </div>
</body>

<body>

...

コンテンツ

...

</section>

</div>

</body>

Step 3: CSS

動画配置用のスタイルシートです。
あとは、コンテンツ用のスタイルシートを記述します。

    * {
      margin: 0; padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    #container {
      overflow: hidden;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
    }
    #background_video {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }
    #video_cover {
      position: absolute;
      width: 100%; height: 100%;
      background: url('video_cover.jpeg') no-repeat;
      background-size: cover;
      background-position: center;
    }

* {

margin: 0; padding: 0;

}

html, body {

width: 100%;

height: 100%;

overflow: hidden;

}

#container {

overflow: hidden;

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

}

#background_video {

position: absolute;

top: 50%; left: 50%;

transform: translate(-50%, -50%);

}

#video_cover {

position: absolute;

width: 100%; height: 100%;

background: url('video_cover.jpeg') no-repeat;

background-size: cover;

background-position: center;

}

Step 4: 動画の設定

動画の設定は、「main.js」に記述します。

(function () {
  var bv = new Bideo();
  bv.init({
    // Video element
    videoEl: document.querySelector('#background_video'),

    // Container element
    container: document.querySelector('body'),

    // Resize
    resize: true,

    // Array of objects containing the src and type
    // of different video formats to add
    src: [
      {
        src: 'night.mp4',
        type: 'video/mp4'
      }
    ],

    // What to do once video loads (initial frame)
    onLoad: function () {
      document.querySelector('#video_cover').style.display = 'none';
    }
  });
}());