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

  • 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. 20161004blog_img1

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

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

    サイト上のぼかされた画像をスクロールに合わせて画像を表示してくれるja…

  2. s-MBPR_9V9A8323_TP_V
  3. 20160204blog

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

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

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

  4. 20160630_1

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

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

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

  5. 20160921blog_img

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

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

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

  6. 20160825blog

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

    PDFファイルを手軽に電子カタログに変換できるWEBサービス紹介!!

    今回ご紹介させて頂くのは誰でも手軽にPDFファイルを本のようにめくれる…

おすすめ記事

  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. s-MBPR_9V9A8323_TP_V

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

    ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグインのご紹介!!
  2. bsN695_ipadwosousasurute

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

    背景動画を用いたWEBサイト!!
  3. 3974fba63660ae4b7f96923bd838d8df_s[1]

    SEO対策

    ターゲットキーワードについて考える!!
  4. 8bb8a7a122856ba61369ff78cf81a236_s

    SEO対策

    ドメイン移転でGoogleのSEO評価を引き継ぐ方法!!
  5. jQuery bluroverlay.js Plugin Demo

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

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