Lightbox2 - How to display video content

Last modified: May 14, 2009 - 11:16

It's possible to show video content in the lightbox. In this case the "rel" attribute should be set to lightvideo. It's possible to group videos and to control the size of the lightbox by setting the 'width' and 'height' properties. The properties can be configured like lightvideo[group|width:300px; height: 200px;]. The properties should all be of the format "property: value;" - note the closing semi-colon. If no properties are set, then the default width and height of 400px will be used. See below for more detailed examples.

Basic example:

<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo">Google video example - default size</a>

Basic example with caption:

<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo[][my caption]">Google video example - default size</a>

Basic example with caption:

<a href="http://video.google.com/videoplay?docid=22349072348092348324" rel="lightvideo[groupname][my caption]">Grouped video 1</a>
<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo[groupname][my caption]">Grouped video 2</a>

Controlling lightbox size example:

<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo[|width:400px; height:300px;][my caption]">Google video example - custom size</a>

Enabling video support

By default, support for videos is disabled. However, this can be easily enabled by checking the enable video support option on admin/settings/lightbox2.

Customization

On admin/settings/lightbox2 under the Video Settings collapsed fieldset, there is the ability to configure both a path to a FLV player and FLV flashvars. The ability to customize the flashvars allows you to turn on and off autoplay, etc. It is not supported for all video formats / 3rd party providers. Fullscreen support is automatically enabled where available.

Supported Video Formats

asx, wmv, mov and swf videos should all be supported.

The following video providers are supported (where videoid represents the id of the video in question):

Google video
The links need to be in one of the following formats:

  • http://video.google.com/googleplayer.swf?docId=videoid
  • http://video.google.com/videoplay?docid=videoid
  • http://video.google.com/videoplay?docid=videoid

google.com, google.de and other google per-country domains should all be supported.

YouTube
The links need to be in one of the following formats:

  • youtube.com/v/videoid
  • youtube.com/watch?v=videoid
  • youtube.com/?v=videoid

MySpace
The links need to be in one of the following formats:

  • myspace.com/index.cfm?fuseaction=vids.individual&videoid=videoid
  • myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=videoid

Live Video
The links need to be in one of the following formats:

  • livevideo.com/flvplayer/embed/videoid
  • livevideo.com/video/videoid

spike.com (formerly ifilm.com)
The links need to be in one of the following formats:

  • spike.com/video/videoid
  • ifilm.com/video/videoid

Metacafe
The links need to be in one of the following formats:

  • metacafe.com/watch/videoid/.....
  • metacafe.com/fplayer/videoid/.....

Vimeo (not supported)
This 3rd party provider isn't supported, but some users have had success with the following format (unverified) for the link:

  • vimeo.com/videoid

If you would like support for additional video providers to be provided, please submit a feature request to the Lightbox2 issue queue with all the relevant details.

Add 16px to the height of .mov file to account for Quicktime bar

tentonjim - November 23, 2009 - 22:04

Figured it out.
You have to add 16px to the height in the lightvideo dims to get the mov file to play the .mov video. This is the height of the quicktime player progress bar at the bottom - apparently you have to account for it.

So if the dims of your mov file is 640px Wide x 480px High, your lightvideo code would be...

<a rel="lightvideo[|width:640px;height:496px;][my caption]" href="/sites/all/themes/mytheme/video/mymovie.mov">

Hope this helps someone. :~)
Thanks!

 
 

Drupal is a registered trademark of Dries Buytaert.