Video Lightboxyoutube And Vimeo Videos In Lightbox

Posted on |

  1. Video Lightboxyoutube And Vimeo Videos In Lightbox Plugin
  2. Video Lightboxyoutube And Vimeo Videos In Lightbox Photography
  3. Video Lightboxyoutube And Vimeo Videos In Lightbox App
  4. Video Lightboxyoutube And Vimeo Videos In Lightbox Gallery
Video Lightboxyoutube And Vimeo Videos In Lightbox

Video Lightning is a highly customizable jQuery lightbox plugin that allows you to play youtube / vimeo videos in a stylish lightbox interface.

SHORTCODE VIDEO Battlefield Hardline Beta Trailer Loading advertisement Up next Battlefield Hardline: Official Launch Gameplay Trailer Teaser Cancel Turn Off Light I Like ThisUnlike Like I Dislike ThisUn-Dislike Dislike Watch Later Share Auto Next 981,688 Views 18,004 1,090 Subscribe 2 Subscribe Subscribed Add To Playlist Playlist Report Report Please enter your reasons. Video Lightning is a highly customizable jQuery lightbox plugin that allows you to play youtube / vimeo video s 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.

How to use it:

1. Load the latest jQuery javascript library and jquery-video-lightning.js script on the web page

2. Include required jQuery video lightning stylesheet on the page

3. Create the html. Using the data-video-id to define the video ID

4. Call the plugin with options.

5. You can also use html5 data-* attributes to apply the options

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:

Video Lightboxyoutube And Vimeo Videos In Lightbox Plugin

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)

Vimeo
  • 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
Lightboxyoutube

Video Lightboxyoutube And Vimeo Videos In Lightbox Photography

v1.1.0 (2013-09-23)

  • added cover image option

Video Lightboxyoutube And Vimeo Videos In Lightbox App

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.

  • Prev: Facebook Like jQuery Responsiv Modal Box Plugin - Mike's Modal Library
  • Next: Lightweight and Simple jQuery Modal Window Plugin - OmniWindow

Pop up a Vimeo video in a lightbox on page load

This is a demo page of playing a Vimeo video in a lightbox on page load. The lightbox will also automatically close when the video finishes.

The code is as following:

The data tag data-autoopen='true' automatically opens the lightbox on page load, data-autoopendelay=1000 defines the open delay in milliseconds, data-autoclose='true' enables the auto close on video finish.

If you want to hide the Vimeo lightbox link, you can place the code into a hidden div, for example: