jQuery Lightbox Plugin For Youtube Videos - Video Lightning

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.