WordPress Video Lightbox Plugin - Display Videos in a Fancy Lightbox Overlay

WordPress Video Lightbox Plugin – Display Videos and Images in a Fancy Lightbox Overlay

Categories: Wordpress Plugin

The WordPress Video Lightbox plugin allows you to embed videos on a page using lightbox overlay display similar to the one shown below. This plugin can be used to display images, flash, YouTube, Vimeo, iFrame etc in a lightbox overlay. The embedded videos can be viewed on iPhone and iPad too. The plugin uses the PrettyPhoto JQuery Library.

Click on the image below to see how the video pops over in a lightbox overlay.

Little Background

Previously I was using another plugin to display my Vimeo videos in a lightbox overlay but recently Vimeo changed their video embed code to use HTML5 in an effort to make the videos playable in iPhone and iPad. Unfortunately, the other plugin wasn’t working with this change and I was getting the following error on all my embedded Vimeo videos:
Sorry, this video does not exist
To get around the problem I created this plugin and tweaked the prettyPhoto JQuery library so it works with the new Vimeo video embed code. When you use this plugin to embed videos it will play your YouTube or Vimeo videos on iPhone and iPad too!

Download WP Video Lightbox

Download the WP Video Lightbox Plugin from here.

Installation

Unzip and Upload the folder ‘wp-video-lightbox’ to the ‘/wp-content/plugins/’ directory.
Activate the plugin through the ‘Plugins’ menu in WordPress.
Follow the instructions in the “Usage” section to start embedding your images, videos etc.

Usage

I have created a PDF file documenting the various ways to use this plugin.

Download the WP Video Lightbox Plugin Usage Instructions.

For a more robust video lightbox plugin checkout our WordPress Lightbox Ultimate Plugin.

User Mods

Download the WP Video Lightbox Thumbnail Mod Submitted by Leslye

Checkout my projects page for more cool WordPress plugins.

If you are looking for a professionally supported feature rich video lightbox plugin then checkout our WordPress Lightbox Ultimate Plugin.

Articles you may also like:

#1 by admin on October 27, 2010 - 10:43 pm

Did you use the shortcode or the HTML approach?

#2 by Matt on October 27, 2010 - 2:37 pm

Hello, everyone.

This plugin truly is a life-saver. I was going nuts trying to get HTML5 working with a lightbox effect.

HOWEVER…now my client wants vimeo, and HTML5. For some reason I can get the HTML5 player working with youtube but not my vimeo movies. And I have definitely checked the box (in my vimeo pro account) to make mobile versions of all my vids.

Is anyone else having this problem? Or can see something I’m not? Here’s the link: http://www.christiemcmahoncreative.com/tv, and the video in question is on the second page of the slider, called “Breakfast with Frasier”.

Thanks in advance!

Matt
.-= Matt´s last blog ..Hello world =-.

#3 by JC on October 26, 2010 - 12:52 am

Thank you so much! ^^

#4 by TedMB on October 23, 2010 - 8:49 pm

Ahh nevermind. I got it working. Just a note that there’s a typo in your instructions pdf “Plugin Usage Guide”…or maybe it’s just displaying wrong in the mac imageviewer. In the embed flash section example code there’s both an “&” and a “amp;” together. When I removed the “amp;” from the code it worked perfectly. Thanks soo much!

Here it is — http://www.mbstrategic.com/10/codeless-website-editing-welcome-to-the-easy-life/
.-= TedMB´s last blog ..Codeless Website Editing – Welcome To The Easy Life =-.

#5 by TedMB on October 23, 2010 - 8:42 pm

Hey this is amazing! I’ve been looking for a way to have the lightbox effect for both images and video at the same time. Thanks!

One question – I want to use it to post .mov videos but the box doesn’t resize to the video – it just stays at 500x359px. I tried adding &?width=792&height=294 to the end of the .mov filename but no such luck. Any suggestions? Thanks!
.-= TedMB´s last blog ..Codeless Website Editing – Welcome To The Easy Life =-.

#6 by ProMomBlogger - RheaBrown.com on October 1, 2010 - 5:42 pm

I’ve used you awesome products since 2009 and love your customer service, fast response and awesome plugins

Promomblogger – RheaBrown.com
.-= ProMomBlogger – RheaBrown.com´s last blog ..BEST Calendar WordPress Plugins =-.

#7 by Kendra on September 28, 2010 - 5:22 pm

w00t! I’ve been looking everywhere for something like this – this is brilliant!
.-= Kendra´s last blog ..Netsuite eCommerce Platform- Perils of the Underdark =-.

#8 by Lings on September 27, 2010 - 6:36 pm

Thanks a Lot Buddy ! Your website is worth bookmarking ! Awesome Post !

#9 by oyun on September 26, 2010 - 7:23 pm

@Cameron, it won’t work on a page if it doesn’t filter the shortcodes that wordpress does by default on it’s posts and pages.

#10 by admin on September 26, 2010 - 12:49 am

@James, yes but you will need to tweak some code. At the moment eStore uses a different lightbox plugin so it has the rel=”lightbox” attached on the product images. You will just have to change the code os it uses the following and that should do the trick:

rel=”wp-video-lightbox”

#11 by admin on September 26, 2010 - 12:47 am

@Mike, I personally haven’t tested it but I am pretty sure you will be able to use the .flv file format.

#12 by James Pyle on September 25, 2010 - 2:06 pm

So I broke down and purchased eStore..then I saw this awesome plugin.

I am wondering if I can implement the lightbox into the eStore? I want when you click on a product image to open the larger image it to use the lightbox.

#13 by Mike on September 25, 2010 - 9:03 am

Will your plugin display .mp4 or .flv files from my own web server using the HTML format for Flash? The .swf Flash format does not allow for the length of my videos. So, I use mp4 or flv.

Thanks so much,

Mike
.-= Mike´s last blog ..Google Gmail Priority Inbox =-.

#14 by admin on September 15, 2010 - 9:01 am

#15 by Jason on September 15, 2010 - 2:20 am

Seriously. Amazing. Had been looking all over for precisely this!
.-= Jason´s last blog ..OriginTalentcom Simply Stated =-.

#16 by Cameron on September 14, 2010 - 9:23 pm

Any way to get this plugin to work on a wp-ecommerce product listing?
It works on regular wordpress pages but not in individual product html.

#17 by admin on September 14, 2010 - 2:00 am

Use the following code to display your video in an overlay:
<a href="http://www.youtube.com/watch?v=rkRfEJP5pD8" rel="wp-video-lightbox">Click Here</a>
Obviously change “Click Here” with what ever you want to say or use an Image instead.

#18 by Jason West on September 13, 2010 - 6:10 pm

I attempting to use the HTML method to display video by clicking on the “see what people are saying about IQMAX” at the bottom of the page at the above address.

I am receiving this error:
$(“a[rel^='prettyOverlay'],a[rel^='prettyPhoto']“).prettyPhoto is not a function

I have checked the source code and prettyPhoto seems to be in the right place. I am assuming that I am missing something obvious since I’m new to WordPress.

This plugin is exactly what my client wants, so any help would be greatly appreciated.

#19 by Irwan Nemoto on September 13, 2010 - 4:15 pm

Thank you so much for this plugin

#20 by admin on September 13, 2010 - 3:07 am

A little more information on the issue you are having would help. Which method are you using? What error do you get? what are you trying to achieve with the plugin?

#21 by Albert matthews on September 12, 2010 - 3:40 pm

Ive really been trying to get this plugin to work in the way laid out in the pdf but it just wont allow me to use it ?? why i do not know.
.-= Albert matthews´s last blog ..How To Pick An Online Niche With A Clear Head =-.

#22 by Konstantinos on August 30, 2010 - 3:48 am

Nice job!
Is there any gallery options??
Thanks!

#23 by Ron on August 29, 2010 - 3:08 am

wonderful plugin… thanks..:)

#24 by zabidi on August 27, 2010 - 2:52 pm

thanks for plugin….is impossible if there is a video created for the http://www.smugmug.com/

#25 by admin on August 24, 2010 - 11:40 pm

Never tested it so not sure.

#26 by Nik on August 24, 2010 - 6:28 am

Will this work with WordTube shortcodes?

#27 by James on August 23, 2010 - 1:56 am

Thanks for this nice video lightbox plugin.

#28 by Alan Eames on August 21, 2010 - 2:58 pm

Hi tipsandtricks guys,

This is awesome. I’ve made note of where you are so I can come back again and find more neat stuff for my blog.

This light box is awesome!

All the best,

Alan

#29 by Corrine on August 21, 2010 - 6:50 am

Thanks for this awesome plugin. Now I can embed all my videos using this plugin.

#30 by admin on August 21, 2010 - 1:05 am

Hi Kim, yeah you should be able to embed any flash videos (see the embedding a flash video in the usage guide)

#31 by Kim Doyal - The WordPress Chick on August 20, 2010 - 8:34 pm

You guys are fabulous!
So this will work with Amazon S3 videos too?
Thanks for another great product!
.-= Kim Doyal – The WordPress Chick´s last blog ..WordPress Chick reviews a kick arse popup plugin! =-.

#32 by Darren (Green Change) on August 20, 2010 - 8:41 am

This is awesome – I’ve been looking for a way to.make video viewable for iPads and iPhones for ages! Thanks so much.
.-= Darren (Green Change)´s last blog ..Bird Nets For Garden Beds =-.

#33 by Jennifer on August 20, 2010 - 5:17 am