動画を背景にフルスクリーンで表示できる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

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

人気の記事

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

コメント

  • Posted on
  • Updated on
  • Views 1,526