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

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 iPad too.

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

Specification
App Category
WordPress Plugin
Software Name
WordPress Video Lightbox
Version
1.6.9
Date Modified
2014-07-27
Operating System
WordPress 3.9
Description
Embed your videos using a fancy lightbox
File Format
application/zip

Download the WP Video Lightbox Plugin from here.

Plugin Compatibility

Works with the latest version of WordPress.

Plugin Requires

Requires WordPress 3.0 or higher.

Plugin Installation

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

Plugin Usage

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

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"]

Automatically Use Video Thumbnail as Anchor

You can use an extra parameter in the shortcode to automatically generate and use the thumbnail of the YouTube or Vimeo video as the anchor image.

Here is an example usage of the shortcode with auto thumbnail option:

[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" auto_thumb="1"]

Or the following for Vimeo video:

[video_lightbox_vimeo5 video_id=29417470 width=800 height=450 auto_thumb="1"]

The above shortcode will produce the following anchor image for the embedded video (it takes the thumbnail of the video automatically):

auto youtube video thumbnail

Checkout my projects page for more cool WordPress plugins.

Found this article interesting? Subscribe to Tips and Tricks HQ

email icon rss feed icon twitter icon google plus icon

Comments (148 responses)

  1. Jordan says:

    That seems to have done the trick. Not sure how I missed that. Thanks!

  2. wpcommerce says:

    @Jordan, do you have “Enable Slideshow” option checked in the video lightbox settings? If so please disable it.

  3. Jordan says:

    I am having the same problem Jeremy was, but I’m not sure how to fix it. My videos restart every 2-3 seconds. It’s as if the plugin is just set on a loop and restarts itself, so the video won’t play properly. I just noticed this happening; previously everything worked perfectly.

  4. Mike Levine says:

    This plugin is goddamn amazing. Seriously has saved me so much time and looks very professional too. Thank yoU!

  5. wpcommerce says:

    @Phyllis, the automatic thumbnail option only works with public vimeo videos.

  6. Phyllis Khare says:

    I’m not getting the thumbnail images. Everything else works great. I’m using private vimeo videos. Can’t change that – it’s for a membership site. Any ideas what to do?

  7. Jeremy says:

    I was able to fix it…there was a problem in mySQL database that I had to fix. Thanks for getting back to me.

  8. wpcommerce says:

    @Jeremy, do you have the automatic slideshow option enabled in the settings?

  9. Jeremy says:

    Can someone please help! All my videos on my site are in a deadly loop of restarting every few seconds. They will pop-up in the lightbox and start playing like they are supposed to but then they restart and restart and restart every few seconds

  10. wpcommerce says:

    @Pulseframe, It’s coming from your theme which is also including the prettyPhoto lightbox script.

  11. Pulseframe says:

    I have this appearing at the bottom left side below each video: {pp_social}
    Should this be appearing social buttons or it’s like a code error?

  12. wpcommerce says:

    @Laurens, There is a checkbox in the video lightbox settings to enable “autoplay” on your videos (Settings->Video Lightbox->prettyPhoto->Autoplay).

  13. Laurens Hoogland says:

    He guys, i use the youtube video shortcode of this plugin in a Revolution slider.
    Works perfect, shows up nice and tidy, only problem i have is that i want the video to autoplay.

    I checked all posts on this site, but cant figure it out.

    So please explain to me how to get the video to autoplay at anchor click.

    Cheers,

    Laurens Hoogland

  14. Chad says:

    Thanks for contacting me. I realized tonight that the problem was due to another plugin I had running that opens all external links in a new window. I had disabled a similar plugin but didn’t realize I had another one as well. Sorry for the trouble.

    Fantastic plugin!

  15. wpcommerce says:

    @Chad, can you please provide a link to the page in question so I can take a look?

  16. Chad says:

    My video opens in the pop-out fine but it also opens YouTube in a separate window/tab. I can’t figure out why. Any help would be appreciated.

  17. shahid says:

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

  18. wpcommerce says:

    @Guido, currently video lightbox doesn’t work with private vimeo video

  19. Guido says:

    Hello,

    thanks for that great plugin.

    i have a problem with the auto_thumb parameter. the thumbnail didn´t visible by the protected mode in Vimeo.

    Is there a solution?

    Thanks
    Guido

  20. wpcommerce says:

    @Sean, You can customize the size of the thumbnail the “wp-video-lightbox.css” file (it’s in the root directory of video lightbox plugin)

  21. Sean says:

    How can you change the size of the thumbnail that the user will click on? It’s so small…

  22. Dan T says:

    Retract that! It seems to be working now. Thanks again for a great plugin that was even easy for a total newbie to use.

  23. Dan T says:

    This is a fantastic plugin. Thanks so much!
    One small problem – after viewing the lightbox video on my iPhone, clicking the little X does not make the lightbox go away.
    Thoughts?

  24. Cam says:

    Found it!

    Looked on the Plugin page and found that it can be changed in the .js file

    I was looking in the php file

  25. Cam says:

    Autoplay Help!

    Ok, I can see in the comments below that if you edit autoplay= ‘true’ in the plugin editor, this should make the video’s auto play once the lighbox appears.

    Only question is, were is/do you put autoplay= ‘true’ ?

    I can’t see autoplay= anywhere

    I’ve try to inlclude it in the function code, but it take you offsite to vimeo.

    Code someone show display the code?

  26. wpcommerce says:

    @jinsmn, do you want to adjust the thumbnail image or the video that opens in lightbox?

  27. jinsmn says:

    Hi, wonderful plugin. I am using it on my website’s gallery page. Is there any option to adjust the auto thumb video size ?

  28. wpcommerce says:

    @Jorge, This feature is not available in the video lightbox. However, the Ultimate Lightbox has a shortcode which allows automatic YouTube video popup when the page loads. Here is the documentation with a list of all the supported parameters:

    http://www.tipsandtricks-hq.com/wp-affiliate-link-manager/wp-content/uploads/wp-lightbox-stuff/docs/wp-lightbox-ultimate-youtube-shortcode-reference-guide.pdf

    Please note that the YouTube video still needs to be embedded on that page (either as a text/image) for the auto popup to function.

  29. Jorge says:

    Great plugin, is there a way that when the page loads it triggers the light box and starts playing the video automatically?

  30. Ben says:

    Love the plugin!
    Can’t get autoplay to work for vimeo though.
    Also, is there a way to add a hover over effect to thumbnail images (ie: display a different image with just text)
    Thanks in advance!

  31. Richard Ambrose says:

    Started using this after another modal plugin broke when I upgraded WordPress.

    Excellent plugin for videos.

  32. Jan says:

    Using this and Compact Audio player for my husband’s site. Thanks for the tips and tricks too! It’s perfect!

  33. admin says:

    @CbrisB, The mod Leslye submitted is to automatically create and generate a thumbnail image from the video and use that as an anchor.

  34. CbrisB says:

    From the comments I have read here the autostart is not supported by the free version. Is it supported if the user ” WP Video Lightbox Thumbnail Mod Submitted by Leslye” php file is loaded?

    If not, what is the above mod for?

  35. Helen says:

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

  36. Heather says:

    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 :)

  37. Denny says:

    Awesome plug-in! makes it all so simple.

  38. Arpan Jain says:

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

  39. Dawn DeLeon says:

    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.

  40. Shahzad says:

    Very nice and handy…hats off to u

  41. Randy King says:

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

  42. Dario says:

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

  43. admin says:

    @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)

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

  44. Lin says:

    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.

  45. Sonny says:

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

  46. Chris Dunst says:

    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.

  47. Steve says:

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

  48. Mary Bouldin says:

    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.

  49. Adam Johnson says:

    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 :-)

  50. admin says:

    @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"]

Speak Your Mind

*