{"id":20963009,"url":"https://github.com/doesdev/jquery-video-lightning","last_synced_at":"2025-05-14T08:34:39.498Z","repository":{"id":57144688,"uuid":"12364420","full_name":"doesdev/jquery-video-lightning","owner":"doesdev","description":"Turn any element into a lightbox or popover link for Youtube and Vimeo videos. ","archived":false,"fork":false,"pushed_at":"2019-08-26T23:47:49.000Z","size":384,"stargazers_count":52,"open_issues_count":1,"forks_count":24,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-06T12:22:19.510Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://doesdev.github.io/jquery-video-lightning/","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/doesdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-08-25T19:29:36.000Z","updated_at":"2024-05-04T14:33:59.000Z","dependencies_parsed_at":"2022-09-05T11:30:38.633Z","dependency_job_id":null,"html_url":"https://github.com/doesdev/jquery-video-lightning","commit_stats":null,"previous_names":["musocrat/jquery-video-lightning"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doesdev%2Fjquery-video-lightning","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doesdev%2Fjquery-video-lightning/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doesdev%2Fjquery-video-lightning/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doesdev%2Fjquery-video-lightning/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doesdev","download_url":"https://codeload.github.com/doesdev/jquery-video-lightning/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254105131,"owners_count":22015597,"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":[],"created_at":"2024-11-19T02:40:13.970Z","updated_at":"2025-05-14T08:34:39.186Z","avatar_url":"https://github.com/doesdev.png","language":"JavaScript","readme":"![alt text](http://doesdev.github.io/jquery-video-lightning/images/JqueryVideoLightningIcon45.png \"Video Lightning Logo\") Video Lightning [![Build Status](https://travis-ci.org/doesdev/jquery-video-lightning.png)](https://travis-ci.org/doesdev/jquery-video-lightning)   [![Pinkie Pie Approval Status](http://dosowisko.net/pinkiepieapproved.svg)](https://www.youtube.com/watch?v=FULyN9Ai-A0)\n======================\n\nTurn any element into a lightbox or popover link for Youtube and Vimeo videos.\n\nRepo name is for posterity, Video Lightning is standalone so jQuery is optional.\n\n### Table of Contents\n- [Why](#why)    \n- [How](#how)    \n- [Features](#features)\n- [Demos](#demos)\n- [Docs](#docs)\n  - [Getting Started](#getting-started)    \n  - [Passing in Options](#passing-in-options)    \n  - [Available Options](#available-options)\n- [Changes](#changes)\n- [Alternate Builds](#alternate-builds)\n- [Contributing](#contributing)        \n\nWhy?\n----\nLots of reasons. The main one, and the reason we built it, is for quick video explainers in the appropriate places. This little plugin bootstraps getting those helpful little videos in place.\n\nHow?\n----\nSimple. Add the js your project, initialize with target and options and enjoy your video lightbox enhanced element!\n\nFeatures\n----\n- Simple access to all embed API options for both providers\n- Lots of options to customize and beautify your lightboxes\n- Intelligent popover auto positioning gravitates to page center\n- Preview videos on hover, pin if you want them to stick around\n- Lazy loading of videos prevents slow page load due to video embeds\n- Rick Roll with ease (don't pass video id, add rick_roll option to prevent closing)\n\nDemos\n----\nCheck the [GH Project Page](http://doesdev.github.io/jquery-video-lightning/) for demos.\n\nDocs\n----\n\n### Getting Started\n**i.**  Add script where you desire *(bottom of body is recommended)*\n\n```html\n\u003cscript src=\"javascripts/jquery-video-lightning.js\"\u003e\u003c/script\u003e\n```\n\n**ii.**  Initialize it on the desired elements with any options you please *(options can also be passed as data attributes)*\n\n#### Native initialization:\n\n```html\n\u003cscript\u003e\n  videoLightning({\n    elements: [\n      {\n        \".video-link\": {\n          id: \"y-PKffm2uI4dk\",\n          autoplay: true,\n          color: \"white\"\n        }\n      }\n    ]\n  });\n\u003c/script\u003e\n```\n\n#### jQuery flavored initialization:\n\n```html\n\u003cscript\u003e\n  $(function() {\n    $(\".video-link\").jqueryVideoLightning({\n        id: \"y-PKffm2uI4dk\",\n        autoplay: true,\n        color: \"white\"\n    });\n  });\n\u003c/script\u003e\n```\n\nAlternatively, for a simple setup you could initialize on a class, set your options globally, and add video id to each el.\n\n ```html\n\u003cdiv class=\"video-link\" data-video-id=\"y-PKffm2uI4dk\"\u003e\u003c/div\u003e\n\u003cdiv class=\"video-link\" data-video-id=\"y-z-D1PJ1cMXs\u003e\u003c/div\u003e\n\u003cscript\u003e\n  videoLightning({settings: {autoplay: true, color: \"white\"}, element: \".video-link\"});\n\u003c/script\u003e\n```\n\n### Passing in Options\nOptions can be passed in any of the following three ways.\n\n#### Options as attributes off the element object (local to element):\n\n```javascript\nvideoLightning({\n  elements: [\n    {\n      \".video-link\": {\n        id: \"y-PKffm2uI4dk\",\n        width: 1280,\n        height: 720\n      }\n    }\n  ]\n});\n```\n\n#### Options as attributes of the `setting` object (global, overwritten by local, doesn't apply to jQuery style init):\n\n```javascript\nvideoLightning({\n  settings: {\n    autoplay: true,\n    width: 1280,\n    height: 720\n  },\n  elements: [\n    {\n      \".video-link\": {\n        id: \"y-PKffm2uI4dk\"\n      }\n    }\n  ]\n});\n```\n\n#### Options as data attributes:\n\n*(Note that data attributes are all prefixed with `data-video` and camel cased options should be dashed instead in data attributes. So `startTime` becomes `data-video-start-time`)*   \n\n*IE\u003c10 does not support `dataset` and as such the only backported settings that work with older IE versions are `id`, `width`, and `height`*   \n\n```html\n\u003cdiv class=\"video-link\" data-video-id=\"y-PKffm2uI4dk\" data-video-width=\"1280\" data-video-height=\"720\"\u003e\u003c/div\u003e\n```\n\n### Available Options\nVideo Lightning exposes all available basic API options for both Youtube and Vimeo. There are also a number of effect, style, and behavior options that are available. The following is the current list of available options.\n\n#### GENERAL OPTIONS\n\n- **id** *(String - default=\"y-dQw4w9WgXcQ\")*  \n\tVendor prefixed video id [if Youtube then prefix with y-xxxxx, if Vimeo then v-xxxxx]\n\n- **width** *(Integer - default=640)*  \n\tVideo width in px\n\n- **height** *(Integer - default=390)*  \n\tVideo height in px\n\n- **autoplay** *(Boolean - default=true)*  \n\tStart playback immediately once the element is clicked (true,false)\n\n- **autoclose** *(Boolean - default=true)*  \n\tAutoclose lightbox / popover once video is complete (true,false)\n\n- **popover** *(Boolean - default=false)*  \n\tOpen in popover instead of lightbox (true,false)\n\n- **peek** *(Boolean - default=false)*  \n\tPreview video on hover, user can click `^` to pin (true,false)\n\n- **bdColor** *(String [hex] - default=\"#ddd\")*  \n\tColor of page overlay\n\n- **bdOpacity** *(Decimal [0 to 1] - default=0.6)*  \n\tOpacity of page overlay\n\n- **frameColor** *(String [hex] - default=\"#000\")*  \n\tColor of iframe video will fill\n\n- **frameBorder** *(String [border/outline css shorthand] - default=\"none\")*  \n\tVideo iframe border `ex: '3px solid #555'`, *note: will change aspect ratio of video*\n\n- **glow** *(Integer - default=20)*  \n\tGlow around video frame\n\n- **glowColor** *(String [hex] - default=\"#000\")*  \n\tGlow color around video frame\n\n- **xBgColor** *(String [hex] - default=\"#000\")*  \n\tClose icon background color\n\n- **xColor** *(String [hex] - default=\"#fff\")*  \n\tClose icon `×` color\n\n- **xBorder** *(String [border/outline css shorthand] - default=\"none\")*  \n\tClose icon box border `ex: '3px solid #555'`\n\n- **fadeIn** *(Integer [ms] - default=300)*  \n\tTime in ms of lightbox fade in\n\n- **fadeOut** *(Integer [ms] - default=0, 1000)*  \n\tTime in ms of lightbox fade out [default is 0 if closed manually, 1000 if autoclosed]\n\n- **zIndex** *(Integer - default=2100)*  \n\tZ-index of page overlay\n\n- **rickRoll** *(Boolean - default=false)*  \n\tMake video un-closable (true,false)\n\n- **cover** *(Boolean - default=false)*  \n\tDisplay cover image (true,false)\n\n- **unload** *(Boolean - default=true)*  \n\tUnload video iframe X seconds after it is closed\n\n- **unloadAfter** *(Integer [s] - default=45)*  \n\tTime in seconds to wait after closing before unloading\n\n- **fluidity** *(Integer - default=30)*  \n\tNumber of steps popover should move in on resize events. Lower is smoother, higher is faster\n\n- **throttle** *(Integer [ms] - default=null)*  \n\tRate limit resize events. Reduces redraws on resizing, lowers accuracy / smoothness of repositioning\n\n#### VENDOR OPTIONS\n\nSome of Youtube's options are not listed below, but everything on their params page (as of 3/15/15) is available.\n[Youtube Params Reference](https://developers.google.com/youtube/player_parameters)\n\n- **autohide** *(default=2)*  \n\tY: auto hide controls after video load (0,1,2)\n\n- **controls** *(default=1)*  \n\tY: display controls (0,1,2)\n\n- **ivLoadPolicy** *(default=1)*  \n\tY: display annotations (1,3)\n\n- **ccLoadPolicy** *(default=null)*  \n\tY: display closed captions by default (null,1)\n\n- **loop** *(default=0)*  \n\tY\u0026V: loop video playback (0,1)\n\n- **modestbranding** *(default=0)*  \n\tY: hide large Youtube logo (0,1)\n\n- **playlist** *(default=\"\")*  \n\tY: comma-separated list of video IDs to play (ex. \"WkgWvaFrJv8,VZPxHUpdAGw\")\n\n- **related** *(default=0)*  \n\tY: show related videos when playback is finished (0,1)\n\n- **showinfo** *(default=1)*  \n\tY: display title, uploader (0,1)  V: display title (0,1)\n\n- **startTime** *(default=0)*  \n\tY: playback start position in seconds (ex. \"132\" starts at 2mins, 12secs)\n\n- **endTime** *(default=0)*  \n\tY: playback end position in seconds (ex. \"132\" ends at 2mins, 12secs)\n\n- **theme** *(default=\"dark\")*  \n\tY: player theme (\"dark\",\"light\")\n\n- **color** *(default=\"\")*  \n\tY: player controls color (\"red\",\"white\") V: player controls color (hex code default is \"#00adef\")\n\n- **byline** *(default=1)*  \n\tV: display byline (0,1)\n\n- **portrait** *(default=1)*  \n\tV: display user's portrait (0,1)\n\nChanges\n----\n\n### Patch [3.0.8]\n- [BUGFIX] start time ignored on subsequent opens ([#23](https://github.com/doesdev/jquery-video-lightning/issues/23))\n- [BUGFIX] protocol for YT and Vimeo are always https\n- [DEPS] update dev dependencies\n\n### Patch [3.0.5]\n- [BUGFIX] backport `id`, `width`, and `height` data-attribute specification to work with IE\u003c10\n- [BUGFIX] use CSS `border` property for borders instead of `outline` (note, will change aspect ratio if `frameBorder` enabled)\n\n### Patch [3.0.4]\n- [FEATURE] added options for iframe background color `frameColor`, iframe border `frameBorder`, close button border `xBorder`\n\n### Patch [3.0.3]\n- [BUG FIX] corrects bug preventing initializing on element by id rather than class\n- [FEATURE] by request bare iframe option was added for embedding a webpage in a VL driven iframe\n  - usage: set vendor + video id to `'f-{url}'`, for example `'f-http://doesdev.github.io/jquery-video-lightning/'`\n\n### General Updates [3.0]\n- complete re-write removing the dependency on jQuery while still supporting jQuery initialization\n- using full iframe API's for Youtube and Vimeo for event handling and interaction\n- adds option to `autoclose` on video end\n- adds `peek` option to preview video on hover with ability to pin popover\n- enhanced gravity function improves popover positioning performance and smoothness\n\n### New Options [3.0]\n- **peek**\n- **autoclose**\n- **unload**\n- **unloadAfter**\n- **fluidity**\n- **throttle**\n- **xBgColor**\n- **xColor**\n\n### Changed Defaults [3.0]\n- **bdColor**: '#000' =\u003e '#ddd'\n- **bdOpacity**: 1.0 =\u003e 0.6\n- **glow**: 0 =\u003e 20\n- **glowColor**: '#fff' =\u003e '#000'\n\n### Changed Parameters [3.0]\n- **width**: (pixel string w/ px suffix) =\u003e (pixel integer)\n- **height**: (pixel string w/ px suffix) =\u003e (pixel integer)\n- **autoplay**: (1,0) =\u003e (true,false)\n- **popover**: (1,0) =\u003e (true,false)\n- **rickRoll**: (1,0) =\u003e (true,false)\n- **cover**: (1,0) =\u003e (true,false)\n\n### Renamed Options [3.0]\n- **backdrop_color** =\u003e **bdColor**\n- **backdrop_opacity** =\u003e **bdOpacity**\n- **ease_in** =\u003e **fadeIn**\n- **ease_out** =\u003e **fadeOut**\n- **glow_color** =\u003e **glowColor**\n- **start_time** =\u003e **startTime**\n- **z_index** =\u003e **zIndex**\n- **rick_roll** =\u003e **rickRoll**\n- **iv_load_policy** =\u003e **ivLoadPolicy**\n\n### Deprecated Options [3.0]\n- **popover_x**\n- **popover_y**\n\nAlternate Builds\n----\n[2.0.1 minified](https://github.com/doesdev/jquery-video-lightning/blob/b0b2218812d4a2f9bd37f9262f7efb227088dc0e/dist/jquery-video-lightning.min.js) (latest jQuery only build) (8.514 kb)  \n[2.0.1 Docs](https://github.com/doesdev/jquery-video-lightning/blob/b0b2218812d4a2f9bd37f9262f7efb227088dc0e/README.md)\n\n[1.1.0 minified](https://github.com/doesdev/jquery-video-lightning/blob/87c0b9370dd3ea3ad09a82541ad295a543139e32/dist/jquery-video-lightning.min.js) (pre-popover, lightbox only) (4.646 kb)  \n[1.1.0 Docs](https://github.com/doesdev/jquery-video-lightning/blob/736846ef61a9e7f8d0c85f362ab791b19986ce1f/README.md)\n\nContributing\n----\n1. Fork it\n2. Create your feature branch (git checkout -b my-new-feature)\n3. Commit your changes (git commit -am 'Added some feature')\n4. Push to the branch (git push origin my-new-feature)\n5. Create new Pull Request\n\n\n----\nauthor: Andrew Carpenter, on behalf of the [musocrat](http://www.musocrat.com) team\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoesdev%2Fjquery-video-lightning","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoesdev%2Fjquery-video-lightning","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoesdev%2Fjquery-video-lightning/lists"}