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 Kat on April 23, 2012 - 10:28 am

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

#2 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!

#3 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.

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

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

#5 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.

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

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

#7 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

#8 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.

#9 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

#10 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

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

Few exactly what I was looking for, you saved my day !

#12 by Tarek on September 16, 2011 - 3:39 pm

Great Plugin, and it works nicely.

And as a way to say thank you, I posted a quick youtube video, showing and explaining this plugin and how to use it.

http://getyourblogready.com/2011/how-to-display-videos-in-a-fancy-lightbox-overlay-on-wordpress/

#13 by sohbet on September 13, 2011 - 3:12 pm

Very nice plugin to add Youtube video on blog, I have used it on my blog.

#14 by admin on June 24, 2011 - 11:25 pm

@John, the ability to group images or videos (the concept of image sets) is not present in this lightbox plugin. The premium version has shortcode that can handle this.

#15 by John Braunstein on June 24, 2011 - 8:58 pm

The option that is usually in JQuery lightboxes to chain images together (with previous and next buttons) with [name_goes_here] is causing the lightbox to pause on opening (basically breaking it). It that functionality not available with this plugin.

Thank you for the plugin.

#16 by admin on May 17, 2011 - 10:17 pm

@Ricky, This free version of the lightbox video plugin cannot handle .mp4 media files unfortunately.

The wp lightbox ultimate plugin can handle .mp4 media files:

http://www.tipsandtricks-hq.com/wordpress-lightbox-ultimate-plugin-display-media-in-a-fancy-lightbox-overlay-3163

#17 by Ricky on May 17, 2011 - 3:38 pm

Please can you tell me what the shortcode would be if i wanted to use my own hosted video in .mp4 format. I didnt see anything in the pdf guide that made reference to this format.

Kind regards

Ricky

#18 by admin on May 6, 2011 - 3:36 am

You mean from the theme’s template file?

You can embed videos from your theme’s template file by putting the shortcode through the do_shortcode() function. For exmaple:
<?php do_shortcode('[video_lightbox_youtube video_id=XX width=640 height=480 anchor=YY]'); ?>

#19 by Doggyology.com on May 6, 2011 - 3:26 am

Is there any way to embed the plugin on the theme of wordpress?

#20 by Ajinkya on March 23, 2011 - 12:55 am

hey thanks. awesome plugin this saved my lots of time

#21 by Alexandra on March 18, 2011 - 8:08 am

Thanks for the awesome plugin – didnt have to search long to find it!
and very easy to install – thanks!

#22 by Leslye on March 4, 2011 - 3:28 pm

Great plugin! I modified it to automatically pull thumbnails from Vimeo and YouTube when anchor=thumb. I can send you the code if you’d like…

#23 by admin on February 8, 2011 - 1:07 am

@Yong, you set that up in your video hosting site’s preferences. This plugin just shows whatever the video shows.

#24 by Yong on February 7, 2011 - 12:40 am

Thank you for this great plugin. This is what I exactly was looking for.

I have a question. Is there any way to turn off showing related videos at the end of playing video?

Thank you,

#25 by Sergiu on January 26, 2011 - 9:02 am

Oh, Graham, to change it to autoplay just go into the plugin’s folder, and edit line 109 of wp-video-lightbox.php, you’ll find there $vid_lightbox_autoplay = ‘false’;

– just change it to TRUE.
.-= Sergiu´s last blog ..Take- Ianke si Cadar la Piatra Neamt =-.

#26 by Sergiu on January 26, 2011 - 8:56 am

Thanks, man! It works like a charm with the latest version of WP (3.0.4)
.-= Sergiu´s last blog ..Take- Ianke si Cadar la Piatra Neamt =-.

#27 by Graham on January 25, 2011 - 5:19 pm

Thank you for the awesome plugin. the non-html code works, not just on pages and posts, but in text/html widgets too. Awesome!

Is there a way to make the video play automatically?

Thanks in advance,
Graham
.-= Graham´s last blog ..Can I Drink Too Much Water =-.

#28 by flick on January 25, 2011 - 9:42 am

Thank you for this plugin, works well and it’s very clean!
Perfect for youtube videos

#29 by peter@blastec on December 28, 2010 - 8:16 pm

Very good post, i enjoyed it alot.

#30 by admin on December 23, 2010 - 8:32 pm

DId you specify the height and width in the shortcode? Please post a link to your web page where you have placed this video.

#31 by Matt on December 23, 2010 - 12:36 am

First of all awesome plugin! It’s working fine but I noticed that the lightbox behind my videos is smaller than the size of my video. It looks kinda weird. The demo video on this page shows your video fitting perfectly inside the black box. Any ideas?

Thanks!

#32 by stephen milne on December 20, 2010 - 3:24 am

update:

im new to wp so not exactly sure what i am doing…..
i had put some javascript links in the header but by removing them the script work.

when i put the javascript links in the footer video lightbox still worked…
so i guess javascript links should go in the footer!

brilliant script
thanks

#33 by Chase on December 19, 2010 - 9:28 pm

update: it was my template header.php. I used part of the header in another temp and it is working great. Thanks again for the great work.

#34 by Chase on December 19, 2010 - 12:42 pm

Update: I have used your example code above on a demo page.

http://brian-mccann.com/2010/12/demo/

Can you view my source and see if I am missing any coding?
thanks for help

#35 by Chase on December 18, 2010 - 11:57 pm

The plugin looks great. I am having some problems getting it to work. I have add it to my directory, activated it in plugins, and have tried the short code and the html. When I click on the text is simple directs me to the youtubes website to watch the video instead of opening up the lightbox. Any idea what I am doing wrong?

#36 by admin on November 26, 2010 - 1:42 am

Image should work as an anchor… I am using the following shortcode to display the video on this page which uses and image as anchor:

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

I have a feeling the image URL you are specifying is resulting a 404? Make sure your image URL is valid.

#37 by paul s on November 24, 2010 - 11:30 pm

REPOST for clarity.

(I’m using your SHORT CODE method for youtube)

For me, this only works using ANCHOR TEXT but I sure need to use an IMAGES for the anchor.

The short PDF instructions state “You can use an image as your anchor too” … but I see no example of that. Should I opt for the longer HTML method? …image url’s aren’t working. Is there another way to insert an image for the anchor?
.-= paul s´s last blog ..WELCOME to CC SKATEPARK !!! =-.

#38 by Dennis "DennisKnows" Marshall on November 21, 2010 - 10:58 pm