Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/souravm84/vidbacking
vidbacking is a jQuery plugin to create HTML5 / Youtube video as background on webpage with fallback image support. It supports mp4 and webm files as well as Youtube video.
https://github.com/souravm84/vidbacking
background-video full-page-video-background html javascript jquery jquery-plugin video-background video-tag youtube-video youtube-video-background
Last synced: 3 months ago
JSON representation
vidbacking is a jQuery plugin to create HTML5 / Youtube video as background on webpage with fallback image support. It supports mp4 and webm files as well as Youtube video.
- Host: GitHub
- URL: https://github.com/souravm84/vidbacking
- Owner: souravm84
- License: mit
- Created: 2017-07-21T10:36:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-10-13T07:56:25.000Z (about 3 years ago)
- Last Synced: 2024-09-29T03:21:21.099Z (3 months ago)
- Topics: background-video, full-page-video-background, html, javascript, jquery, jquery-plugin, video-background, video-tag, youtube-video, youtube-video-background
- Language: JavaScript
- Homepage: https://goo.gl/nZaLmr
- Size: 30.3 MB
- Stars: 58
- Watchers: 5
- Forks: 21
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Video Background Plugin with Support for Youtube Video
##### vidbacking is an attempt to make HTML5 video-background easy. Support video files and Youtube video
[](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
$(function(){
$('body').vidbacking();
});
```
#### 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
$(function(){
$('#video-back').vidbacking();
});
```
> Note: don't forget to import jQuery before adding the above script.
#### For full page background with Youtube Video:
You need to add the `` tag next to your HTML body tag. You can get that iframe code under Youtube video's share -> Embed section. Copy the entire iframe tag provided there. Paste it in your HTML and add the ***class="vidbacking"*** in that iframe 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
$(function(){
$('body').vidbacking();
});
```
#### For `
` or other block level elements' background with Youtube video:
You need to add the `` tag under the `
` or block level element for which you want to set a video-background. You can get that iframe code under Youtube video's share -> Embed section. Copy the entire iframe tag provided there. Paste it in your HTML and add the ***class="vidbacking"*** in that iframe 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
$(function(){
$('#video-back').vidbacking({
'masked': true
});
});
```
> 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.