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

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

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

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

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

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

スポンサーリンク

実装方法

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

ダウンロード

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

ダウンロード

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

HTML

HTMLを用意します。

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

CSS

CSSを用意します。

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

JS

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

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

以上で完了です。

動画関連の人気記事

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

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2016.05.30
  • Views 693