10 Free jQuery Plugin To Create A Fullscreen Video Background

Full-screen video backgrounds have gained momentum as a trend in website design, as a natural result of the trend to full-screen background images. After HTML5 introduced the <video> tag, which made it easier to include videos in web design, websites with background videos started appearing all over the web.

Videos could spread much more information than plain images and texts, which also grabs viewer’s attention straight away. Here are 10 jQuery & HTML5 Video Background Plugins that turns videos into beautiful full-screen backgrounds. These plugins enables you to easily integrate some of your favorite videos as your website/blog background. Hope this could save your time from googling!

 

1 – Vide

vide-jquery-plugin

Demo Download

A jQuery plugin for easily adding video backgrounds to your webpages.

  • All modern desktop browsers are supported.
  • IE9+
  • iOS plays video from a browser only in the native player. So video for iOS is disabled, only fullscreen poster will be used.
  • Some android devices play video, some not — go figure. So video for android is disabled, only fullscreen poster will be used.

 

2 – Covervid

covervid-jquery-plugin

Demo Download

Make your HTML5 video behave like a background cover image with this lightweight Javascript plugin / jQuery extension.

CoverVid is very lightweight, with only 800 bytes of Javascripts. It is usable in native Javascript and jQuery. Its’ logic is parent based, meaning the parent element can be any size (Not necessarily just a full-screen background).

 

3 – jquery.videoBG

videobg-jquery-plugin

Demo Download

This jQuery plugin enables you to very easily use an HTML5 video as a background to a website or any div.

For browsers that don’t support the HTML5 video tag, it just uses an image.

 

4 – YTPlayer

ytplayer-jquery-plugin

Demo Download

With this jQuery component you can set a YouTube movie as the background of your page or view it in a chrome-less customizable player!

All the controls are made with javascript and CSS.

 

5 – BigVideo.js

bigvideo-jquery-plugin

Demo Download

This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video.

 

6 – Video background in Genesis using jQuery

video-background-in-genesis-jquery-plugin

Demo Download

 

7 – Tubular

tubular-jquery-plugin

Demo Download

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you’re on your way.

Please note, tubular must be deployed on a web server to function. The YouTube player will not work when loaded into your browser from your machine.

 

8 – Vegas Background jQuery Plugin

vegas-jquery-plugin

Demo Download

Vegas Background is a jQuery plugin to add beautiful fullscreen backgrounds or even create amazing slideshows to your webpages. This plugin will automatic applies a cool texture to make the background image looks like ‘background’.

 

9 – jQuery Video Background plugin

jquery-video-background-plugin

Demo Download

Example of the jQuery Video Background plugin. Will place a resizable video in to the background of the page or designated element. Browsers that don’t support the HTML5 video element will get an image if a poster image was provided.

If the containing element’s width and height does not match the aspect ration of the video, the video will not stretch to fill the container but will render based on the largest dimension.

 

10 – OKVideo

okvideo-jquery-plugin

Demo Download

OKVideo is a jQuery plugin that allows for YouTube or Vimeo videos to be used as full-screen backgrounds on webpages. OKVideo aims to be customizable while making some basic decisions about how the plugin should control video. When using OKVideo, all videos will be served from Vimeo or YouTube based on a number of variables like browser, device, bandwidth, etc.

OKVideo uses the new YouTube IFrame API which does not require any Flash objects to be present on your website. This means that mobile devices will play video served by OKVideo. Content from Vimeo is served in a similar manner, although sometimes their videos will still be served in Flash.

Tested and working in Safari 5.1+, Chrome, Firefox 3.6+, IE 8+, Mobile Safari, Chrome for iOS.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *