jQuery Lightbox Plugin For Youtube Videos - Video Lightning

File Size: 156 KB
Views Total: 70434
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

$(function() {
autoplay: 1,
backdrop_color: "#ddd",
backdrop_opacity: 0.6,
glow: 20,
glow_color: "#000"

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)

v3.0.8 (2018-01-15)

  • Fixed: Start time attribute ignored when lightbox closed and link clicked for second time


  •  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.