# Video Background Plugin with Support for Youtube Video ##### vidbacking is an attempt to make HTML5 video-background easy. Support video files and Youtube video [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/souravm84/vidbacking/master/LICENSE.md) This is a small jQuery plugin to simplify the process of showing HTML5 video as background. You can use this for showing a video file or Youtube video on **whole page background** or to show the video as the background of a `
`, `
`, like elements. > ***Features:*** > * Cross Browser Video Background Plugin. > * Support mp4, webm video files. > * Support Youtube video. > * Very small file size (4kb total). > * Easy to use. > * Can be used for both page background or for an element background. > * Image fallback when video not supported. > * Pause video when out of viewport. > * Multiple instances on same page possible. > * Device friendly, responsive. > * Tested on all modern browsers. ### Demo Check few demos in action. > [Full page background example with mp4, webm video files](https://souravm84.github.io/vidbacking/demo1/) > > [Video as a `
` background with mp4, webm video files](https://souravm84.github.io/vidbacking/demo2/) > >[Full page background example with Youtube video](https://souravm84.github.io/vidbacking/demo3/) > > [Video as a `
` background with Youtube video](https://souravm84.github.io/vidbacking/demo4/) ### Dependency The **vidbacking** depends on jQuery 2.x or higher. No other files required for it to work properly. Also, it requires HTML5 video tag support in the browser(This is a common feature in all major browsers). ### How to Install You can clone/download it from github.com directly. This plugin is also available through npm. In order to download this from npm use the following command > npm install vidbacking ### How to use You can use this video-background plugin in two different way. Either for video as page background, or for the background of a `
`, `
`, or some other block level elements. #### For full page background with mp4, or webm video file: You need to add the HTML5 video tag next to your HTML body tag. Don't forget to add the ***class="vidbacking"*** in your video tag. ```html ``` Link the css file jquery.vidbacking.min.css provided under the `dist` folder under your `` tag. ```html ``` Then import the script after importing jQuery file, and write a little script as described in following section. ```html ``` #### For `
` or other block level elements' background with mp4, or webm video file: You need to add the HTML5 video tag under the `
` or block level element for which you want to set a video-background. Don't forget to add the ***class="vidbacking"*** in your video tag. ```html

Vidbacking Demo of <div> Background

``` Link the css file jquery.vidbacking.min.css provided under the `dist` folder under your `` tag. ```html ``` Then import the script after importing jQuery file, and write a little script as described in following section. ```html ``` > Note: don't forget to import jQuery before adding the above script. #### For full page background with Youtube Video: You need to add the ` ``` Link the css file jquery.vidbacking.min.css provided under the `dist` folder under your `` tag. ```html ``` Then import the script after importing jQuery file, and write a little script as described in following section. ```html ``` #### For `
` or other block level elements' background with Youtube video: You need to add the `

Vidbacking Demo of <div> Background

``` Link the css file jquery.vidbacking.min.css provided under the `dist` folder under your `` tag. ```html ``` Then import the script after importing jQuery file, and write a little script as described in following section. ```html ``` > Note: don't forget to import jQuery before adding the above script. ### Plugin parameters This plugin support following parameters. You can change the output of vidbacking by setting these parameters. > ***masked:*** This parameter can have two possible values `true` or `false`. If set to `true` will masked the video with a png image overlay. Default Value `false`. > > ***mask-opacity:*** If `masked` is `true` then by setting this parameter you can change the opacity of the mask image. Possible value ranged between `1` to `0`, for example `mask-opacity: 0.25`. Default value `1` > > ***video-opacity:*** You can set the video opacity using this parameter. Possible value ranged between `1` to `0`, for example `video-opacity: 0.5`. This option doesn't work on Youtube videos. Default value `1` > >***youtube-mute-video:*** Setting this parameter to `true` makes the Youtube video muted. Default value is `true`. > >***youtube-loop:*** Set this parameter "true" to loop the YouTube video. Possible values are `true` and `false`. Default value is `true`. I have plans for upgrading this plugin with more functionalities. If you found any issues please report in this repo, I will try to fix them in next release.