動きのあるホームページブログ!!

  • TOP
  • ブログ
  • 背景にフルスクリーン動画を表示させる「covervid.js」の紹介です!
CoverVid

動くホームページブログ!!

背景にフルスクリーン動画を表示させる「covervid.js」の紹介です!

JQueryの登場で最近よく見受けられる背景動画を用いたWEBサイト。
背景に動画を活用することにより、イメージも伝わりやすく、
アクセスしてきたユーザーを注目させることが出来ます!!

今回はJQueryのプラグイン「covervid.js」というプラグインを使用して
背景動画の実装方法を紹介していこうと思います。

Githubでファイル一式ダウンロードが行えるので、ダウンロードします!!

ダウンロードはこちら

html記述でheadとbodyに以下の記述を行います。

HEADの記述

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="./covervid.js"></script>

STYLEの記述

.covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTMLの記述

<div class="covervid-wrapper">
    <video class="covervid-video" autoplay loop poster="img/video-fallback.png">
        <source src="videos/clouds.webm" type="video/webm">
        <source src="videos/clouds.mp4" type="video/mp4">
    </video>
</div>

動画拡張子にはwebm、mp4が必要になります。
動画を撮影される方は動画再生時間20秒~40秒、
最高で60秒ぐらいまでが理想です。

また、撮影する際に拡張子を複数用意しないといけないので、
エンコーダーなどを使用してエンコードする必要があります。

デモサイトは以下のURLより公開されております。

http://stefanerickson.github.io/covervid/

動くホームページブログの1番目の記事で「背景動画を用いたWEBサイト!!」を紹介させて頂きましたが、
実際に使用されているWEBサイトの確認は以下のから確認できます。

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. bsN695_ipadwosousasurute

    動くホームページブログ!!

    背景動画を用いたWEBサイト!!

    背景動画を用いることによってサイトの雰囲気、サービスの具体的な内容を動…

  2. 20160204blog

    動くホームページブログ!!

    WEB上で本をめくるような電子カタログプラグインのご紹介!!

    本をめくるような電子カタログプラグイン「turn.js」のご紹介です。…

  3. ice_screenshot_20160831-012703

    動くホームページブログ!!

    RTLテキスト対応JQueryのコンテンツスライダー・グライダーの作成方法

    グライダーとは自動再生やカスタムスライドコントロール、無限ループ、自動…

  4. 20160630_1

    動くホームページブログ!!

    WordPress上で本をめくるような電子カタログプラグインのご紹介!!

    WordPress(ワードプレス)上でつくる「本をめくるような電子カタ…

  5. 20160921blog_img

    動くホームページブログ!!

    レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法!!

    レスポンシブ対応の自動フルスクリーン背景スライドの作成方法のご紹介です…

  6. jQuery bluroverlay.js Plugin Demo

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン③
  2. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン①
  3. 20161004blog_img1

    動くホームページブログ!!

    スクロールする際に画像をフェードさせるJavascriptプラグインのご紹介!!…
  4. 15d0dcde2feb2af4fea63f3ee6660a2f_s

    制作ツールブログ!!

    ホームページの運用に役立つ無料の編集ソフト!!
  5. jQuery bluroverlay.js Plugin Demo

    動くホームページブログ!!

    JQueryとSVGフィルタを使用したぼかしビュー「bluroverlay.js…