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

Compatibility

Works with the latest version of WordPress.

Requires

Requires WordPress 3.0 or higher.

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.

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

How to Turn Off the Related Videos At the End of a YouTube Video

If you do not want to show the “suggested videos” that YouTube shows at the end of a video playback then use the following technique:

Add &rel=0 at the end of the video ID which will turn off the related videos display.

Here is an example shortcode that shows you how to use this:
[video_lightbox_youtube video_id="G7z74BvLWUg&rel=0" width="640" height="480" anchor="click me"]
Alternatively, you can use “rel=false” at the end of the video URL to turn off the the related videos. Here is an example:
[video_lightbox_youtube video_id="G7z74BvLWUg&rel=false" width="640" height="480" anchor="click me"]

User Mod

Download the WP Video Lightbox Thumbnail Mod Submitted by Leslye

Checkout my projects page for more cool WordPress plugins.

#1 by Helen on May 23, 2013 - 8:19 am

I got it to work – thanks its a great plugin!!

#2 by Heather on May 19, 2013 - 3:40 am

I worked out how to disable related videos from showing up! Instead of using rel=0 I tried rel=false AND IT WORKED!!

http://www.youtube.com/watch?v=VIDEO-ID-IN-HERE&rel=false

I LOVE THIS PLUG IN – it’s the best plugin I’ve ever found I reckon…. well done

#3 by Denny on May 11, 2013 - 5:15 pm

Awesome plug-in! makes it all so simple.

#4 by Arpan Jain on May 5, 2013 - 1:47 pm

The plugin really worked for me. It has made my work easy. Thanks for the share and keep up the noble work!!!

#5 by Dawn DeLeon on April 27, 2013 - 5:25 pm

Nice plugin that actually works. I tried another version wp lightbox plus colorbox plugin that I couldn’t get to work. Thanks admin for your reply “You simply use the image URL as the value of the “anchor” parameter. Here is an example shortcode usage with an image as the anchor:

[video_lightbox_youtube video_id="G7z74BvLWUg" width=640 height=480 anchor="http://www.tipsandtricks-hq.com/wp-content/uploads/2010/08/video-lightbox-thumb2.png"]

That the code I needed to use image. and I put the rel=0 after id to show no related videos. Thanks for all your help.

#6 by Shahzad on March 29, 2013 - 5:46 am

Very nice and handy…hats off to u

#7 by Randy King on March 21, 2013 - 7:00 pm

Really great plugin, thank you! Very clean, works as advertised and really straightforward to use it.

#8 by Dario on March 19, 2013 - 1:01 pm

This is a great and easy to use plugin – handled my needs right away!

#9 by admin on March 7, 2013 - 11:18 pm

@Lin, I have made a small update to the plugin which will allow this.

Please download the new version of the plugin (v1.4) from this page then check the section with the following heading (it tells you how you can turn ff the related videos from showing at the end of the video)

#10 by Lin on March 7, 2013 - 8:21 pm

Hope someone can help. I really like the WordPress Video Lightbox plugin, but have been searching to find out how I can turn-off ‘related videos’ from showing up at the end of the video. I can turn them off at YouTube, but not with this plug-in.

#11 by Sonny on January 27, 2013 - 1:23 am

This was the answer to my prayers. EXACTLY what I needed! Stumble onto it, glad I found this plugin. Thanks a bunch!

#12 by Chris Dunst on December 9, 2012 - 5:08 pm

If it helps anyone else, I found the following to be the definitive url formats to use:

http://youtube.com/watch?v=abcd1234
http://vimeo.com/abcd1234

Just change the abcd1234 on the above obviously. I went round in circles for a long time trying plugins and URL formats, but this plugin, with the above formats definitely works.

#13 by Steve on November 15, 2012 - 2:03 pm

Great plugin – exactly what I needed and a piece of cake to instal!

#14 by Mary Bouldin on November 7, 2012 - 2:52 am

Just wanted to thank you for creating a perfect solution to my clients’ request along with excellent info on using the plug-in. It works perfectly linking to images as buttons with almost no effort whatsoever.

Just a quick FYI for anyone trying to link a YouTube vid to am image as a button:
<a href="http://www.youtube.com/watch?v=G7z74BvLWUg" title="" rel="nofollow">
In that bit of the code, remove the space that you’ll find in the pdf instructions file here:
youtube.com/watch?v=G7z74BvLWUg" rel="wp-video-lightbox"
To:
youtube.com/watch?v=G7z74BvLWUg" rel="wp-video-lightbox"
This space between the video URL and the rel= code kept this from working ’till I deleted it.

Great documentation, otherwise! You rock.

#15 by Adam Johnson on October 9, 2012 - 5:46 pm

This might help somebody in the future, I had problems getting Vimeo videos to work, YouTube worked fine though.

It turned out the URL I got from Vimeo was wrong, or at least it needed to be changed to work.

The bad URL was:
http://player.vimeo.com/video/48556589

The correct URL is:
http://player.vimeo.com/48556589

So just remove the /video part and that solves the problem. I’m sure the documentation tells you that somewhere but I missed it

#16 by admin on September 20, 2012 - 3:33 am

@Larry, You simply use the image URL as the value of the “anchor” parameter. Here is an example shortcode usage with an image as the anchor:
[video_lightbox_youtube video_id="G7z74BvLWUg" width=640 height=480 anchor="http://www.tipsandtricks-hq.com/wp-content/uploads/2010/08/video-lightbox-thumb2.png"]

#17 by Larry on September 19, 2012 - 3:43 pm

Not sure if my message from yesterday was deleted but this plugin is AWESOME and very much appreciated
Can you help explain how to replace the anchor YY with an image? I have tried what I know to do (limited) and failing at it (user error)
Thanks!

#18 by Quadrofan on July 27, 2012 - 8:13 am

Oh well, just use followed instructions!

Go to plugin editor, and put the value of autoplay= ‘true’

#19 by Daniel on July 27, 2012 - 8:12 am

Great Plugin! Works like a charm! Is there any chance to get this plugin to autorun the videos in lightbox?

#20 by Janice Bennett on July 4, 2012 - 7:43 pm

Sa-weet little plugin.

Thanks so much!

#21 by Matias on July 1, 2012 - 12:17 pm

Already using this plugin and working perfectly.

Thanks

#22 by Tone on June 5, 2012 - 8:10 pm

Just wanted to thank you for a super plugin!

#23 by Anonymous on May 21, 2012 - 11:05 am

If you want autoplay, go to plugin editor, and put the value of autoplay= ‘true’.

Thanks for the plugin btw.

#24 by Kat on April 23, 2012 - 10:28 am

Thank you so much for this. Very useful and well done!

#25 by Bobby on April 11, 2012 - 4:10 pm

Thank you for the lightbox plugin. I will use this plugin for a few of my current projects!

#26 by John on January 28, 2012 - 11:26 am

Yes, please append the example HTML code that have the &;amp between the width and height as this broke the code. Just changed it to width=”640″ height=”420″ and it worked perfectly. Great plugin. Thanks.

#27 by Rich on January 18, 2012 - 2:40 am

You are awesome!! This plugin is awesome!! Awesome!!

#28 by snowlas on January 17, 2012 - 2:05 pm

Thank you! For taking the time and creating this plug in! And the guide. Much appreciated.

#29 by admin on November 22, 2011 - 2:24 am

Yes, it will be able to do autoplay for YouTube videos.

#30 by Don Roberts on November 22, 2011 - 1:56 am

Thank you for your quick response. Just to be clear, will Lightbox Ultimate provide autoplay functionality for YouTube videos?
Best, Don

#31 by admin on November 22, 2011 - 12:34 am

Hi Don, This lightweight plugin does not have autoplay option. The lightbox ultimate one has autoplay option for select libraries.

#32 by Don Roberts on November 21, 2011 - 10:40 pm

Hi,

I’m using your great “wp video lightbox” plugin…and launching it after a visitor clicks an image (as shown in your associated PDF).

Doing it this way, is there a way to make the video autoplay when the video player displays in the lightbox? Appending “&autoplay=1″ does *not* seem to work. However, “&rel=0″ does work to turn-off related videos from showing up.

Best, Don

#33 by Mark Alan Effinger on September 28, 2011 - 10:16 pm

Dude!

5 plugins, 3 custom script downloads and 6 hours later… and of ALL of the options, yours was the ONLY one that works effortlessly. Intelligently (thank you SHort Code Guy!) and performs without a hiccup.

Next Starbucks is on me, my friend.

Thanks a ton.
ME

#34 by Stéphanie on September 22, 2011 - 5:43 am