blog.web68.vn

our sponsors

Easy as hell to make video background for your website


INTRODUCTION

Vide is a really small jQuery plugin, but will bring big WOW to your visitor by creating stunning background video for your website. It's easy to use, do the job well and should be in your web development toolkit. We will have a look at its featurea & usage briefly

FEATURES

Vide has some nice features:

  • Support almost all modern browsers
  • Support video background for any element
  • Support initialization with HTML5 attributes
  • Small size (~3.6kb minified)

USAGE

Let's look at how it works, we will use the demo video from the Vide's homepage to make our page's background

METHOD 1: Use JS to initialize

1. Add to your page's <HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://vodkabears.github.io/vide/js/jquery.vide.min.js"></script>

2. Adjust CSS to make it full

html,body {
  height: 100%;
}

3. Call JS to initialize the video

$("body").vide("http://vodkabears.github.io/vide/video/ocean.mp4",{
    volume: 1,
    playbackRate: 1,
    muted: true,
    loop: true,
    autoplay: true,
    position: "50% 50%" // Alignment
});

3. Demo

 

See the Pen Background video with Vide by Thanh Nguyen (@genievn) on CodePen.

METHOD 2: Use HTML5 attributes

1. Adjust your <BODY> tag

<body data-vide-bg="video/ocean">

Vide will check the "video" directory (relative to your current page), and select "ocean.mp4" (or other extensions "ocean.webm" "ocean.ogv"  to be compatible with different browsers). In this directory, you can put  "ocean.jpg" or "ocean.png" or"ocean.gif" to make video's poster

2. Adjust CSS to make it full

html,body {
  height: 100%;
}

3. Add at the END of your page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://vodkabears.github.io/vide/js/jquery.vide.min.js"></script>

 

 


Tags
jquery  video  plugin  background  
comments powered by Disqus