{"id":13566019,"url":"https://github.com/souravm84/vidbacking","last_synced_at":"2025-06-23T01:34:11.400Z","repository":{"id":57392134,"uuid":"97936772","full_name":"souravm84/vidbacking","owner":"souravm84","description":"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.","archived":false,"fork":false,"pushed_at":"2021-10-13T07:56:25.000Z","size":31796,"stargazers_count":57,"open_issues_count":1,"forks_count":21,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-29T19:35:06.638Z","etag":null,"topics":["background-video","full-page-video-background","html","javascript","jquery","jquery-plugin","video-background","video-tag","youtube-video","youtube-video-background"],"latest_commit_sha":null,"homepage":"https://goo.gl/nZaLmr","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/souravm84.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"souravm84":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-07-21T10:36:14.000Z","updated_at":"2025-05-22T07:20:40.000Z","dependencies_parsed_at":"2022-09-26T17:00:22.674Z","dependency_job_id":null,"html_url":"https://github.com/souravm84/vidbacking","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/souravm84/vidbacking","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souravm84%2Fvidbacking","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souravm84%2Fvidbacking/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souravm84%2Fvidbacking/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souravm84%2Fvidbacking/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/souravm84","download_url":"https://codeload.github.com/souravm84/vidbacking/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/souravm84%2Fvidbacking/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261395192,"owners_count":23152348,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["background-video","full-page-video-background","html","javascript","jquery","jquery-plugin","video-background","video-tag","youtube-video","youtube-video-background"],"created_at":"2024-08-01T13:02:00.231Z","updated_at":"2025-06-23T01:34:06.254Z","avatar_url":"https://github.com/souravm84.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Video Background Plugin with Support for Youtube Video\n##### vidbacking is an attempt to make HTML5 video-background easy. Support video files and Youtube video\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/souravm84/vidbacking/master/LICENSE.md)\n\nThis 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 `\u003cdiv\u003e`, `\u003csection\u003e`, like elements.\n\u003e  ***Features:***\n\u003e * Cross Browser Video Background Plugin.\n\u003e * Support mp4, webm video files.\n\u003e * Support Youtube video.\n\u003e * Very small file size (4kb total).\n\u003e * Easy to use.\n\u003e * Can be used for both page background or for an element background.\n\u003e * Image fallback when video not supported.\n\u003e * Pause video when out of viewport.\n\u003e * Multiple instances on same page possible.\n\u003e * Device friendly, responsive.\n\u003e * Tested on all modern browsers.\n\n\n### Demo\nCheck few demos in action.\n\n\u003e [Full page background example with mp4, webm video files](https://souravm84.github.io/vidbacking/demo1/)\n\u003e\n\u003e [Video as a `\u003cdiv\u003e` background  with mp4, webm video files](https://souravm84.github.io/vidbacking/demo2/)\n\u003e\n\u003e[Full page background example with Youtube video](https://souravm84.github.io/vidbacking/demo3/)\n\u003e\n\u003e [Video as a `\u003cdiv\u003e` background  with Youtube video](https://souravm84.github.io/vidbacking/demo4/)\n\n### Dependency\nThe **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).\n\n### How to Install\nYou 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\n\u003e npm install vidbacking\n\n### How to use\nYou can use this video-background plugin in two different way. Either for video as page background, or for the background of a `\u003cdiv\u003e`, `\u003csection\u003e`, or some other block level elements.\n#### For full page background with mp4, or webm video file:\n\nYou 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.\n\n```html\n\u003cvideo poster=\"screenshot1.jpg\" autoplay muted loop class=\"vidbacking\"\u003e\n\t\u003csource src=\"video1.mp4\" type=\"video/mp4\"\u003e\n\t\u003csource src=\"video1.webm\" type=\"video/webm\"\u003e\n\u003c/video\u003e\n```\n\nLink the css file jquery.vidbacking.min.css provided under the `dist` folder under your `\u003chead /\u003e` tag.\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/jquery.vidbacking.css\" type=\"text/css\"\u003e\n```\nThen import the script after importing jQuery file, and write a little script as described in following section.\n\n```html\n\u003cscript type=\"text/javascript\" src=\"dist/jquery.vidbacking.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\t$(function(){\n    \t\t$('body').vidbacking();\n\t});\n\u003c/script\u003e\n```\n\n#### For `\u003cdiv\u003e` or other block level elements' background with mp4, or webm video file:\n\nYou need to add the HTML5 video tag under the `\u003cdiv\u003e` 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.\n```html\n\u003cdiv id=\"video-back\"\u003e\n\t\u003cvideo poster=\"screenshot1.jpg\" autoplay muted loop class=\"vidbacking\"\u003e\n\t\t\u003csource src=\"video1.mp4\" type=\"video/mp4\"\u003e\n\t\t\u003csource src=\"video1.webm\" type=\"video/webm\"\u003e\n\t\u003c/video\u003e\n    \u003c!-- html content of the div --\u003e\n    \u003ch1\u003eVidbacking Demo of \u0026lt;div\u0026gt; Background\u003c/h1\u003e\n\u003c/div\u003e\n```\n\nLink the css file jquery.vidbacking.min.css provided under the `dist` folder under your `\u003chead /\u003e` tag.\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/jquery.vidbacking.css\" type=\"text/css\"\u003e\n```\n\nThen import the script after importing jQuery file, and write a little script as described in following section.\n\n```html\n\u003cscript type=\"text/javascript\" src=\"dist/jquery.vidbacking.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\t$(function(){\n    \t\t$('#video-back').vidbacking();\n\t});\n\u003c/script\u003e\n```\n\u003e Note: don't forget to import jQuery before adding the above script.\n\n#### For full page background with Youtube Video:\n\nYou need to add the `\u003ciframe\u003e` tag next to  your HTML body tag. You can get that iframe code under Youtube video's share -\u003e Embed section. Copy the entire iframe tag provided there. Paste it in your HTML and add the ***class=\"vidbacking\"*** in that iframe tag.\n\n```html\n\u003ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/2NYwewKYHB4\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen  class=\"vidbacking\"\u003e\u003c/iframe\u003e\n```\nLink the css file jquery.vidbacking.min.css provided under the `dist` folder under your `\u003chead /\u003e` tag.\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/jquery.vidbacking.css\" type=\"text/css\"\u003e\n```\nThen import the script after importing jQuery file, and write a little script as described in following section.\n\n```html\n\u003cscript type=\"text/javascript\" src=\"dist/jquery.vidbacking.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\t$(function(){\n    \t\t$('body').vidbacking();\n\t});\n\u003c/script\u003e\n```\n#### For `\u003cdiv\u003e` or other block level elements' background with Youtube video:\n\nYou need to add the `\u003ciframe\u003e` tag under the `\u003cdiv\u003e` or block level element for which you want to set a video-background. You can get that iframe code under Youtube video's share -\u003e Embed section. Copy the entire iframe tag provided there. Paste it in your HTML and add the ***class=\"vidbacking\"*** in that iframe tag.\n```html\n\u003cdiv id=\"video-back\"\u003e\n\t\u003ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/2NYwewKYHB4\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen  class=\"vidbacking\"\u003e\u003c/iframe\u003e\n    \u003c!-- html content of the div --\u003e\n    \u003ch1\u003eVidbacking Demo of \u0026lt;div\u0026gt; Background\u003c/h1\u003e\n\u003c/div\u003e\n```\n\nLink the css file jquery.vidbacking.min.css provided under the `dist` folder under your `\u003chead /\u003e` tag.\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/jquery.vidbacking.css\" type=\"text/css\"\u003e\n```\n\nThen import the script after importing jQuery file, and write a little script as described in following section.\n\n```html\n\u003cscript type=\"text/javascript\" src=\"dist/jquery.vidbacking.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\t$(function(){\n    \t\t$('#video-back').vidbacking({\n\t    \t\t'masked': true\n    \t\t});\n\t});\n\u003c/script\u003e\n```\n\u003e Note: don't forget to import jQuery before adding the above script.\n\n\n### Plugin parameters\nThis plugin support following parameters. You can change the output of vidbacking by setting these parameters.\n\u003e ***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`.\n\u003e\n\u003e ***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`\n\u003e\n\u003e ***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`\n\u003e\n\u003e***youtube-mute-video:*** Setting this parameter to `true` makes the Youtube video muted. Default value is `true`.\n\u003e\n\u003e***youtube-loop:*** Set this parameter \"true\" to loop the YouTube video. Possible values are `true` and `false`. Default value is `true`.\n\nI 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouravm84%2Fvidbacking","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsouravm84%2Fvidbacking","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsouravm84%2Fvidbacking/lists"}