Last updated 1 September 2015. Created on 28 April 2008.
Edited by latikas, acbramley, stella. Log in to edit this page.

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:

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
This provider is supported with a patch provided at https://www.drupal.org/node/318418:

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

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

tentonjim’s picture

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!

rkolinsky’s picture

I looked at your website and I want to do exactly like you did with lightbox2 video.
Everytime I click on the thumb, the mov file opens up a new window. Any help you could provide would be appreciated.

here is my site: patpdx.org/cuba2

loominade’s picture

how can i get my own videos to work?

vijayg’s picture

Hi
i was having the same problem which you were facing. Hope i can help you. Do visit my blog which i wrote after i solved the problem.
http://bhutanit.blogspot.com/

a.d2000’s picture

I am also having same issue. I am having my custom url for video in html 5 video player (videojs). How can I open that in lightbox ?

I have tried many ways but it is not working.

@vijayg : I am not able to open url you mentioned.

Please let me know solution if anyone has.

playground21’s picture

When tried to enable video support I get this error message "FLV player path doesn't exist."
What to do?

I want to be able to play the video in lightbox2.
I have created a video that is in avi format which I just realized is not listed on the supported list.

tentonjim’s picture

You may want to try JW Player http://www.longtailvideo.com/

It comes with a few files - in my instance I put/unzipped them directly under the Drupal root in a folder called "mediaplayer".
drupal-6.15\mediaplayer

Then in Drupal Admin:
http://www.YOUR-SITE.com/admin/settings/lightbox2/general

go down and expand the Video Settings:
check the box "Enable video support"
under "Path to FLV Player" put your new path where you put JW player... /mediaplayer/player.swf
under "FLV Player flashvars" put (I have these anyway) bufferlength=5&autostart=true&playerMode=normal
Make sure you have lightbox enabled on whatever page you are playing the video from.

I also changed AUTOSTART from "false" to "true" in the lightbox_video.js file on line 24:
C:\whatever-path-to-your\drupal-6.15\sites\all\modules\lightbox2\js\lightbox_video.js

This is so my Windows media .wmv movies would autostart - your preference.

Hope this helps!

Also - what file format are you trying to play?

playground21’s picture

Hi,

I'm now using Flowplayer along with Lightbox2, I'm able to bring up Flowplayer in Lightbox when click on a thumbnail, but the video is not getting played. The file format is FLV. Here is a link to my test site http://nailsystem.intrapos.com:9898/

Thanks

loominade’s picture

this gets me the following error message inside of the flash

301: Unable to load plugin: Unable to load plugin, url flowplayer.controls.swf, name controls

I use the flowplayer swf from tools. could this be a problem?

Edit: sorry, I use the flowplayer and didn't relalised it

loominade’s picture

unfortunately, the flow player has a flashvar like this:

config%3D%7B%20'playlist'%3A%20%5B%20%7B%20'url'%3A%20'http%3A%2F%2Fexample.com%2Fsites%2Fdefault%2Ffiles%2Ffoo.flv'%20%7D%20%5D%2C%20'canvas'%3A%20%7B%20'height'%3A%20'456'%2C%20'width'%3A%20'729'%2C%20'backgroundRepeat'%3A%20'no-repeat'%2C%20'backgroundGradient'%3A%20'none'%2C%20'backgroundColor'%3A%20'%23ffffff'%20%7D%2C%20'clip'%3A%20%7B%20'autoPlay'%3A%20false%2C%20'autoBuffering'%3A%20false%2C%20'scaling'%3A%20'scale'%2C%20'accelerated'%3A%20false%2C%20'linkWindow'%3A%20'_blank'%2C%20'live'%3A%20false%20%7D%2C%20'plugins'%3A%20%7B%20'controls'%3A%20%7B%20'backgroundGradient'%3A%20'medium'%2C%20'progressGradient'%3A%20'medium'%2C%20'bufferGradient'%3A%20'none'%2C%20'sliderGradient'%3A%20'none'%2C%20'autoHide'%3A%20'fullscreen'%2C%20'play'%3A%20true%2C%20'volume'%3A%20true%2C%20'mute'%3A%20true%2C%20'time'%3A%20true%2C%20'stop'%3A%20false%2C%20'playlist'%3A%20false%2C%20'fullscreen'%3A%20true%2C%20'scrubber'%3A%20true%2C%20'backgroundColor'%3A%20'%23ffffff'%2C%20'timeColor'%3A%20'%23000000'%2C%20'durationColor'%3A%20'%23ffffff'%2C%20'progressColor'%3A%20'%23FCC00A'%2C%20'bufferColor'%3A%20'%23FCC00A'%2C%20'sliderColor'%3A%20'%23FCC00A'%2C%20'buttonColor'%3A%20'%23FCC00A'%2C%20'buttonOverColor'%3A%20'%23FCC00A'%20%7D%20%7D%20%7D%26width%3D729%26height%3D456

this one has a length of 1280 chars. But in admin/settings/lightbox2/general you can enter only 128 characters.

BenasPlentas’s picture

Hi,
I don't know if it's a player or a Lightbox2 issue, but with Lightbox2 and JW player configuration I'm getting this kind of problem - it doesn't streem videos in Safari browser in OS X system.

It looks like it works on all the rest: i've tested it on Ubuntu (Mozilla, Safari, Chrome, Opera) and Windows (Interenet Explorer, Safari, Mozilla, Chrome, Opera), but it doesn't work on OS X's Safari - the popup page goes white and - SOMETIMES - it loads video after some time, but usually not.

Maybe somebody can advice what could be the problem - should I chose another player, fix something in lightbox or maybe it's some Javascript issue in the browser?

would appreciate your comments!

unc0nnected’s picture

Don't put player.swf on the end of it, it just wants the path without the file included

escoles’s picture

Or just delete the contents of that field.

(This value is irrelevant if you're using an embedded player like YouTube or Vimeo.)

albercook’s picture

I have set the path to JW Player and the FLV Player flashvars. But no luck. Lightbox2 will play google videos and youtube videos but will not play .flv files from a url. The videos on the url are good they play on another Durpal site that does not have lightbox.

Fixed it. Read in an older post. If the video is coming from a source other than google or youtube you need the path to the video player and I was missing the leading /.

Thanks

skittlyoaten’s picture

How do you handle notifying the user they need to install flash to view the video if they do not already have it installed. All I see in this scenario is an empty window, which may lead people to believe it's broken, not that they have to install the flash plugin.

tentonjim’s picture

<object type="application/x-shockwave-flash
data="movie.swf" 
width="400" height="300">
<param name="movie" 
value="movie.swf" />
<img src="noflash.gif"         <------------ add an image for no flash browsers
width="400" height="300" alt="" />
</object>

Displays an image if the browser cannot handle flash.

trulygreat’s picture

I have a swf file, and no matter how I do the width/height paramaters, it opens up full screen, rather than staying within the lightbox.

Anyone have any ideas?

rel="lightvideo[width:500px;height:450px;]"
rel="lightvideo[|width:500px;height:450px;]"
rel="lightvideo[|width:500;height:450;]"

None of the above work for me!

Thanks!

Thia

trulygreat’s picture

I found as long as I use lightframe rather than lightvideo, it works great!

dixiesk’s picture

that's because anything [] is replaced by replacement patterns... I have been able to hack it by adding another field (node id) and putting this into 'rewrite the output of this field':
[|width:360px;height:228px][[title]]

and in my video rewrite field:

<a href="[field_video_file_fid]" rel="lightvideo[nid]">[field_video_thumbnail_fid]</a>

that's only because I don't know how to escape [] ....

could anybody perhaps help?

kiseed’s picture

I have the same poblem, I put the correct code:
rel="lightvideo[|width:840px; height:700px;]
and in the page appears like this:
rel"700px;]"

I solved it marking Full HTML instead of Filtered HTML.

Aleix

missmobtown’s picture

This was exactly my problem, thanks for the very logical fix.

yobyot’s picture

I'd like to be able to use lightbox2 to control BOTH the size of the lightbox AND create a group. (I discovered grouping accidentally -- and this produces precisely the effect of "next" and "back" I was looking for in these video lightboxes.)

Here are two snippets from my website. In the first snippet, where I specify a group, the "width" and "height" parms are ignored. In the second, the size parms are respected, but I can't group. Can anyone suggest what I may have missed or done wrong?

<a href="/VideoDemos/OutlookDemo.flv" rel="lightvideo[grp1|width:1000px;height:800px;]" title="Outlook demo"><img src="/VideoDemos/xx.jpg" width="210" height="160"><br />Outlook demo</a>

<a href="/VideoDemos/OutlookDemo.flv" rel="lightvideo[|width:1000px;height:800px;]" title="Outlook demo"><img src="/VideoDemos/xx.jpg" width="210" height="160"><br />Outlook demo</a>

julsjuls’s picture

It's been like two years since yobyot's comment but I was looking for the same thing and I found one way to answer the above question:

I'm using a trigger to open the lightbox:

<a href="JavaScript:void(0);" onclick="Lightbox.triggerLightbox('lightvideo');">Videos</a>

And my videos are grouped like this:

<a style="display: none;" href="youtube.com/watch?v=XDnNfDjdrf0" rel="lightshow[vids|width:300px; height:200px;]" title="Albert Camus">Albert Camus Video</a>
<a style="display: none;" href="http://www.youtube.com/watch?v=Yu_UFHrC02k" rel="lightshow[vids|width:300px; height:200px;]" title="Heidegger">Heidegger Video</a>

So I think the answer is in not passing the group name argument in where you would have this

<a href="JavaScript:void(0);" onclick="Lightbox.triggerLightbox('lightvideo');">Videos</a>

instead of

<a href="JavaScript:void(0);" onclick="Lightbox.triggerLightbox('lightvideo', 'vids');">Videos</a>

Azone’s picture

How do I turn on autoplay per youtube video?

When using this format. youtube.com/watch?v=videoid

If I do it in the main Lightbox settings I do it for all, I want it per video.

Thanx

mark@redhorseinteractive.com’s picture

Please disregard. Didn't realize one had to specific a Flash player even for YouTube videos. Seems weird but just putting an .swf path in the video configuration made everything come together.

houstonaplus’s picture

In "Video Settings", type in "autoplay=1" in the "FLV Player flashvars" textfield

EDIT: ignore since i missed out the per video requirement.

dOwen’s picture

Thank you for the means to include video in lightbox2 with lightvideo.

Maybe I missed it, but I don't see a way to use clickable thumbnails displayed horizontally to present the various videos.

Is there a way to do this?

Thanks again,

dOwen’s picture

<span><a href="/sites/default/files/atmos-01.flv" rel="lightvideo[NASA][Jupiter is created with a large-scale NASA image map of the entire planet, a depth map made of the same and atmosphere in Maya.]"><img src="/sites/default/files/jupiter.jpg" width="100" height="100"><br \>Jupiter</a></span>

<span><a href="/sites/default/files/comet.mov" rel="lightvideo[NASA]['Comet' created with Maya and AfterEffects]"><img src="/sites/default/files/comet.jpg" width="100" height="100"><br \>Imaginary Comet</a></span>

By dropping the font links 'Jupiter', etc. the images line up horizontally. It's just a CSS issue.

Solved by assigning class to <a> tag:

.art-article p span a.img,	.art-article p span a.img	img	{
	float: left;	margin:	10px	24px	10px	0px;
}
GeoffW’s picture

When embedding a YouTube video in the normal way one can include a 'start' parameter, e.g. '&start=210', which starts the video 210 seconds in. I can't do this with a Lightbox2 video, though I've tried various obvious possibilities - any suggestions?

chatkins’s picture

For some reason I cannot get a youtube video to play in a lightbox on an ipad or iphone (they play fine on my desktop). All of my regular embedded youtube videos play fine on iOS devices, but they just pull a white box when I put them in a lightbox. Here is the code I am using:

<a href="http://www.youtube.com/v/EivFMoiao4Q&amp;hl=en&amp;fs=1&amp;rel=0" rel="lightframe[width:801px; height:500px]">Watch the QuantumCards Video</a> 

Any thoughts on how to get them to play on iOS?

mark@redhorseinteractive.com’s picture

I can't seem to get lightbox to work with YouTube video. I have it working on an image so I know the module is running.

This is my code. It seems to be just like what you have indicated:

a href="http://youtube.com/v/gzHkHhP8hpI" rel="lightvideo [|width:400px; height:300px;][my caption]">Example

What could the problem be?

Much thanks in advance.

mark@redhorseinteractive.com’s picture

It's silly but the need to enable video requires an .swf (doesn't matter what) to be indicated in Path to FLV Player under Video Settings in Configuration... why that's necessary to view a youTube clip? It's silly, but not big deal... worth putting in the "how to" notes, though... I beggared a bit of time on it. LOL.

ezman’s picture

I found I could just remove the player.swf text from the form and save it and it works fine.

peter.thorndycraft’s picture

You just saved me ALOT of time and effort... Thank you! :)

xamount’s picture

I was able to play a youtube video without specifying a swf file value in the lightbox video settings. (Currently I just left this field blank).

Here is how I accomplished it. You will have to adjust your field variables names to suit your website.

In template.php:

foreach ($vars['node']->field_video['und'] as $key) {

  $lightbox_image = theme('image_formatter', array (

                            'item' => array ('uri' => $key['node']->field_video_link['und'][0]['thumbnail_path']),

                            'image_style' => '140x90',

                            ));           

$video_lightbox .= l($lightbox_image, $key['node']->field_video_link['und'][0]['video_url'], array('html' => TRUE, 'attributes' => array('rel' => 'lightvideo[videos|width:600px; height:400px;]['.$key['node']->field_caption['und'][0]['safe_value'].']')));
 

}
$vars['video_lightbox'] = $video_lightbox;

Then in your node template:

print $video_lightbox;

Just posting my code in case that it might help someone.

praneeth87’s picture

Though good to share this.

Vimeo support work only after this patch.
http://drupal.org/node/318418#comment-2790566

Anybody’s picture

I'm afraid this solution does not work with https:// SSL Links!

The lightframe just loads the content from HTTP, which is really problematic in SSL environments, because Firefox for example doesn't display the unsecure content then.

Any suggestions?

http://www.DROWL.de || Professionelle Drupal Lösungen aus Ostwestfalen-Lippe (OWL)
http://www.webks.de || webks: websolutions kept simple - Webbasierte Lösungen die einfach überzeugen!
http://www.drupal-theming.com || Individuelle Responsive Themes

omvaishnav’s picture

Anyone knows that how can we show our MP4 videos in lightbox?

I am trying this one:
< a herf="/sites/default/files/myvideo.mp4" rel="lightvideo[|width:720px; height:410px;]">Lightbox Link< / a >

But its not showing my video.

Can anyone help me?

Thanks
Om