動画を背景にフルスクリーンで表示できるJSライブラリ「bideo.js」

動画を背景にフルスクリーンで表示できるJSライブラリを紹介します。

動画を背景にフルスクリーンで表示できるJSライブラリ
bideo.js

背景に動画を表示するサイトが増えています。動画はユーザーの目を楽しませたり、ブランドのストーリーを伝えたり、ユーザーに新しい体験を提供することができます。

bideo.jsを使うと、動画を背景にフルスクリーンで表示させることができます。

デモが公開されているのでをご覧ください。

実装方法

サンプルページを用意しました。動画素材はMazwaiから利用しました。

ダウンロード

GitHubにソースが公開されています。右側の「Clone or download」の中にある「Download ZIP」ボタンからダウンロードします。

ダウンロード

ZIPファイルを展開したら、bideo.jsmain.jsを使います。

HTML

HTMLを用意します。

<div id="container">
  <video id="background_video" loop muted autoplay></video>
  <div id="video_cover"></div>
  <div id="overlay"></div>
  <section id="contents">
    ...
  </section>
</div>

<section id="contents">には動画の前面に重ねて表示したいコンテンツを入れます。

CSS

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;
  height: 100%;
}

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

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

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

#contents {
  position: relative;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
}

#video_coverbackground: url('image/video_cover.jpg') no-repeat;で、動画が読み込まれる前に表示するカバー画像のパスを指定します。

JS

</body>閉じタグの前でbideo.jsmain.jsを読み込みます。

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

main.jsの17行目に動画ファイルの場所が記述されているので、必要に応じて変更します。

src: 'video/video.mp4',

以上で完了です。

動画関連の人気記事

スタイリッシュで高機能、しかもシンプルで使いやすいHTML5メディアプレイヤー「Plyr.js」
スタイリッシュで高機能、しかもシンプルで使いやすいHTML5メディアプレイヤー「Plyr.js」
背景動画をすぐに実装できるjQueryプラグイン VIDE
背景動画をすぐに実装できるjQueryプラグイン VIDE
背景いっぱいに画像や動画のスライドショーを表示できるjQueryプラグイン Vegas Background SlideShow
背景いっぱいに画像や動画のスライドショーを表示できるjQueryプラグイン Vegas Background SlideShow
ハイクオリティな動画素材が無料で利用できる Mazwai
ハイクオリティな動画素材が無料で利用できる Mazwai

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 1,684