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>

Recent Post