背景に動画を使用したホームページが簡単に作れるスクリプト「Bideo.js」

公開日：2016/06/03

JavaScript 動画背景

2、3年前くらいから背景に動画を使ったホームページを見ることが多くなってきたように思います。
動画を活用することによって、画像や文章では伝えることのできない情報を提供できたり、ユーザーの印象にも残ると感じます。

今回は背景に動画を使用したホームページが簡単に実装できるスクリプト「Bideo.js」をご紹介します。

jquery_bideojs_1

Bideo.js

スクリプトが無くてもホームページに動画を組み込むことは可能ですが、簡単に組み込むことができてかつ軽量なのでおすすめです。

「Bideo.js」で背景に動画を設置する

「Bideo.js」を使用して背景に動画を設置してみました。
作成したデモページはこちらです。

「Bideo.js」を使用したデモページ

まずは背景に使用する動画を用意します

そして「Bideo.js」をダウンロードします。
下記GitHubページよりダウンロードすることができます。

https://github.com/rishabhp/bideo.js

ファイル読込

ダウンロードしたスクリプトを読み込みます。
使用するのは「bideo.js」と「main.js」です。
bodyの閉じタグの前に記述します。

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

1 2	<script src="bideo.js"></script> <script src="main.js"></script>

main.jsで動画ファイルを設定

「src: ‘night.mp4’,」の行をアップロードした動画ファイル名に変更します。

(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';
    }
  });
}());

(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';

}

});

}());

HTML

下記のソースを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>

</section>

</div>

CSS

動画設置に必要なスタイルを記述します。
「video_cover.jpeg」の背景に使用する画像も用意します。

* {
	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;

}

後はコンテンツの表示に必要なスタイルを記述します。

body {
	text-align: center;
}

#container {
	height: 100%;
}

#overlay {
	position: absolute;
	top: 0; right: 0; left: 0; bottom: 0;
	background: rgba(0,0,0,0.5);
}

#main_content {
	z-index: 2;
	position: relative;
	display: inline-block;

	/* Vertical center */
	top: 50%;
	transform: translateY(-50%);
}

body {

text-align: center;

}

#container {

height: 100%;

}

#overlay {

position: absolute;

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

background: rgba(0,0,0,0.5);

}

#main_content {

z-index: 2;

position: relative;

display: inline-block;

/* Vertical center */

top: 50%;

transform: translateY(-50%);

}

上記の設定が完了すれば背景に動画を使用したページを作ることができます。

サンプル

「Bideo.js」を使用したデモページ

まとめ

かなり久しぶりの投稿になってしまいました…

動画をホームページ内で使うとユーザーに伝えるときの表現力が増すと考えています。
サービスや商品を説明する場合でも画像や文章だと伝えにくいことも動画で説明できれば見てくれる人もわかりやすいですよね。

アドエータイプでは動画の作成から動画を活用したホームページの制作も承っております。

動画を使ったコンテンツを作りたいとお考えであれば、是非ご連絡ください。

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください！

お気軽にご相談ください。
022-716-3883
営業時間　平日9:30～18:00

<< 前の記事

商用無料のアイコンサイト！iconmonstrを利用してみた。

次の記事 >>

2016年リリース Android Nの新機能とユーモアのあるコードネーム！

仙台のホームページ制作･システム開発･ウェブコンサルティングはアド･エータイプへ。

背景に動画を使用したホームページが簡単に作れるスクリプト「Bideo.js」

「Bideo.js」で背景に動画を設置する

ファイル読込

main.jsで動画ファイルを設定

HTML

CSS

サンプル

まとめ

関連記事

Category

最近の投稿

人気の投稿