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

bideo.jsの設置手順

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

bideo.jpのダウンロードサイト

bideo.js

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

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

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

HTMLへの記載

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

CSSの記述

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

Microsoft Edgeへの対応

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

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

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

まとめ

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