ツイートするシェアするピンするブクマするあとで読むLINEで送る最近は、Webサイトの背景に映像を配置しているものが増えてきました。今回、クライアントの要望があり、背景映像を設置したサイトを制作するにあたり、bideo.jsというスクリプトを使ってみたので設置手順をまとめてみました。bideo.jsは背景動画をブラウザいっぱいまたは、指定したコンテナ内に表示することができます。bideo.js単体で動作し、軽量でレスポンシブにも対応なので、これらのWebサイトに使用していきやすいスクリプトだと思います。bideo.jsの設置手順まず、bideo.jsのサイトにアクセスしてスクリプトをダウンロードしてきます。クリックするとGitHubからダウンロードできます。bideo.jpのダウンロードサイトページにスクリプトを読み込ませる背景動画を使用するページにスクリプトを読み込ませます。</body>タグの直前くらいに、bideo.jsとmain.jsを読み込ませます。bideo.jsとmain.jsまでのパスは制作している環境に合わせて指定してください。HTMLへの記載HTML内の動画を表示させる箇所に必要なタグを記載します。<body>~</body>内に記載してください。下記HTMLは一例です。CSSの記述CSSは以下のように記述します。video_coverに背景画像を指定し、何かしらの原因で動画が再生できない場合に表示される画像を指定しよう。画像は各自準備してください。追記:2018年7月13日なぜかEdgeだと、映像が全画面表示になりませんでした。以下のCSSを追加すると全画面表示ができるようになりました。Edgeのみ適用されるCSSハックで#background_videoのheightをautoに上書きします。main.jsで動画までのパスを指定main.jsで動画ファイルのパスを指定します。25行目のmovie/video.mp4を設置する動画ファイルのパスに合わせて変更してください。まとめこのように、そんなに難しい設定をしなくても、レスポンシブ対応背景画像が設置できます。動画でイメージを具体的に伝えたい時などはうまく使っていきたいなと思います。Yamamoto広島県広島市育ち、現在岡山でWeb制作の仕事をしています。「Web関連で勉強したこと、役立つアイディア」をテーマにした内容を備忘録としてブログに書いています。大学卒業後は勤務している会社のWeb制作を担当。小規模サイトから大学公式サイトの制作・運営などに携わっています。削除される不具合が解消されたので必ず設定を再確認しよう!コメントはこちらコメントをキャンセルコメント名前メールアドレス次回コメントで使用するためブラウザに自分の名前、メールアドレスを保存する。JunJunWeb.Net。