jQuery Lightbox Plugin For Youtube Videos - Video Lightning
File Size: | 156 KB |
---|---|
Views Total: | 70018 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Video Lightning is a highly customizable jQuery lightbox plugin that allows you to play youtube / vimeo videos in a stylish lightbox interface.
How to use it:
1. Load the latest jQuery javascript library and jquery-video-lightning.js script on the web page
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="src/jquery-video-lightning.js"></script>
2. Include required jQuery video lightning stylesheet on the page
<link href="src/jquery-video-lightning.css" rel="stylesheet" type="text/css">
3. Create the html. Using the data-video-id
to define the video ID
<span class="video-link" data-video-id="y-PKffm2uI4dk">Youtube</span>
4. Call the plugin with options.
<script> $(function() { $(".video-link").jqueryVideoLightning({ autoplay: 1, backdrop_color: "#ddd", backdrop_opacity: 0.6, glow: 20, glow_color: "#000" }); }); </script>
5. You can also use html5 data-* attributes
to apply the options
<span class="video-link" data-video-id="y-PKffm2uI4dk" data-video-width="1280px" data-video-height="720px" data-video-autoplay="1" ></span>
6. All the options.
- id (default="y-dQw4w9WgXcQ"): Vendor prefixed video id [if Youtube then prefix with y-xxxxx, if Vimeo then v-xxxxx]
- width (default="640px"): video width in px
- height (default="390px"): video height in px
- autoplay (default=true: start playback immediately (0,1)
- autoclose (default=true): Autoclose lightbox / popover once video is complete
- popover (default=false): Open in popover instead of lightbox (true,false)
- peek (default=false): Preview video on hover, user can click ^ to pin (true,false)
- bdColor (String [hex] - default="#ddd"): Color of page overlay
- bdOpacity (Decimal [0 to 1] - default=0.6): Opacity of page overlay
- glow (default=20): Glow around video frame
- glowColor (default="#000"): Glow color around video frame
- xBgColor (default="#000"): Close icon background color
- xColor (default="#fff"): Close icon × color
- fadeIn (Integer [ms] - default=300): Time in ms of lightbox fade in
- fadeOut (Integer [ms] - default=0, 1000): Time in ms of lightbox fade out [default is 0 if closed manually, 1000 if autoclosed]
- zIndex (default=2100): Z-index of page overlay
- rickRoll (default=false): Make video un-closable (true,false)
- cover (default=false): Display cover image (true,false)
- unload (default=true): Unload video iframe X seconds after it is closed
- unloadAfter (Integer [s] - default=45): Time in seconds to wait after closing before unloading
- fluidity (default=30): Number of steps popover should move in on resize events. Lower is smoother, higher is faster
- throttle (Integer [ms] - default=null): Rate limit resize events. Reduces redraws on resizing, lowers accuracy / smoothness of repositioning
- frameColor (String [hex] - default="#000"): Color of iframe video will fill
- frameBorder (String [border/outline css shorthand] - default="none"): Video iframe border ex: '3px solid #555'
- xBorder (String [border/outline css shorthand] - default="none"): Close icon box border ex: '3px solid #555'
Change logs:
v3.0.9 (2018-01-20)
- Update
v3.0.8 (2018-01-15)
- Fixed: Start time attribute ignored when lightbox closed and link clicked for second time
2016-01-28
- Add responsive back in
v3.0.6 (2015-09-16)
- Fix Safari bug
v3.0.5 (2015-04-30)
- IE<10 dataset patch, border fix
v3.0.4 (2015-04-25)
- Add frameColor, frameBorder, xBorder
v3.0.3 (2015-04-24)
- Id bugfix, add bare iframe feature
v3.0 (2015-04-04)
- complete re-write removing the dependency on jQuery while still supporting jQuery initialization
- using full iframe API's for Youtube and Vimeo for event handling and interaction
- adds option to autoclose on video end
- adds peek option to preview video on hover with ability to pin popover
- enhanced gravity function improves popover positioning performance and smoothness
v2.0.1 (2014-04-04)
- Fixed ease out not working
v2.0.0 (2013-09-23)
- options update
v1.1.0 (2013-09-23)
- added cover image option
v1.0.3 (2013-09-18)
- fixed Firefox compatibility issue
v1.0.2 (2013-09-14)
- make width dynamic when window is narrow
This awesome jQuery plugin is developed by doesdev. For more Advanced Usages, please check the demo page or visit the official website.