背景動画イメージ
背景動画イメージ

Webサイトの背景に動画を簡単設置できるJavaScriptライブラリ「bideo.js」

最近は、Webサイトの背景に映像を配置しているものが増えてきました。今回、クライアントの要望があり、背景映像を設置したサイトを制作するにあたり、bideo.jsというスクリプトを使ってみたので設置手順をまとめてみました。bideo.jsは背景動画をブラウザいっぱいまたは、指定したコンテナ内に表示することができます。また、bideo.js単体で動作し、軽量でレスポンシブにも対応なので、これらのWebサイトに使用していきやすいスクリプトだと思います。

bideo.jsの設置手順

まず、bideo.jsのサイトにアクセスしてスクリプトをダウンロードしてきます。以下のサイトにアクセスして [ VIEW ON GITHUB ] をクリックするとGitHubからダウンロードできます。

bideo.js

ページにスクリプトを読み込ませる

背景動画を使用するページにスクリプトを読み込ませます。</body>タグの直前くらいに、bideo.jsmain.jsを読み込ませます。

<body>

    <!--Webサイトのコンテンツ-->

    <script src="js/bideo.js"></script>
    <script src="js/main.js"></script>
</body>

bideo.jsmain.jsまでのパスは制作している環境に合わせて指定してください。

HTMLへの記載

HTML内の動画を表示させる箇所に必要なタグを記載します。<body></body>内に記載してください。下記HTMLは一例です。

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

CSSの記述

CSSは以下のように記述します。video_coverに背景画像を指定し、何かしらの原因で動画が再生できない場合に表示される画像を指定しよう。画像は各自準備してください。

html, body {
    width: 100%;
    height: 100%;
}

#container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

#background_video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

#video_cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('images/video_cover.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}

#video_controls {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

#play img {
    width: 100px;
}
#pause img {
    width: 90px;
}
#pause {
    display: none;
}

@media (min-width: 768px) {
    #video_controls {
        display: none;
    }
}

Microsoft Edgeへの対応

追記:2018年7月13日
なぜかEdgeだと、映像が全画面表示になりませんでした。以下のCSSを追加すると全画面表示ができるようになりました。Edgeのみ適用されるCSSハックで#background_videoheightをautoに上書きします。

/*Edgeのみ適用*/
@supports (-ms-ime-align: auto) {
    #background_video {
        height: auto;
    }
}

main.jsで動画までのパスを指定

main.jsで動画ファイルのパスを指定します。25行目のmovie/video.mp4を設置する動画ファイルのパスに合わせて変更してください。

(function () {

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

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

    // Resize
    resize: true,

    // autoplay: false,

    isMobile: window.matchMedia('(max-width: 768px)').matches,

    playButton: document.querySelector('#play'),
    pauseButton: document.querySelector('#pause'),

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

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

まとめ

このように、そんなに難しい設定をしなくても、レスポンシブ対応背景画像が設置できます。動画でイメージを具体的に伝えたい時などはうまく使っていきたいなと思います。モバイルサイトでいきなり動画がくると表示速度の問題があるので、静止画やスライドショーなどに切り替えて表示する必要がでてくるかもしれませんが…


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利