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
Download the WP Video Lightbox Plugin from here.
Plugin Compatibility
Works with the latest version of WordPress.
Plugin Requires
Requires WordPress 3.5 or higher.
Plugin 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.
Plugin Usage
Our documentation for this plugin shows the various ways to use this plugin.
- Check the WP Video Lightbox Plugin Documentation.
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):
Using an Image as the Anchor of a Video
You can use an image as the anchor of the video (that will trigger the lightbox effect). Enter the image URL in the “anchor” parameter of the shortcode.
Here is an example usage of the shortcode:
[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" anchor="http://www.yourdomain.com/wp-content/uploads/anchor-image.jpg"]
Make sure to enter a valid image URL for the anchor. You should first enter the anchor image URL in the browser’s address bar to verify that the image loads (that way you know if the image URL is valid or not).
Specifying alt Attribute for Thumbnail Image
You can use the “alt” parameter in the shortcode to specify an alternate text for your thumbnail image. Search Engines read this text description to understand what this image is about.
Here is an example usage of the shortcode with the “alt” parameter:
[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" anchor="http://www.example.com/images/youtube-thumb.jpg" alt="text that describes this image"]
Specifying a Description for the Video
You can use the “description” parameter in the shortcode to specify a description for the video. The description text will show up below the video in the lightbox window.
Here is an example usage of the shortcode with the “description” parameter:
[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" description="Test description text for the video"]
How to Enable Privacy-enhanced Mode in a YouTube Video
If you want to enable “privacy-enhanced mode” in a YouTube video, add &nocookie=1 at the end of the video ID.
Below is an example shortcode that shows you how to use this:
[video_lightbox_youtube video_id="G7z74BvLWUg&nocookie=1" width="640" height="480" anchor="click me"]
Check out my projects page for more cool WordPress plugins.
Thanks for this great plugin. Everything works perfectly.
@Sam, Video Lightbox plugin can only popup from its own shortcode. I believe you have another lightbox plugin installed which is automatically formatting every link on your website to open in lightbox. Deactivating the conflicting plugin should fix this issue.
Hi, I’m currently testing out the free version of this plugin and I love it. The only problem is that when I click to open up my thumbnail to open up the lightbox, another window displaying a youtube video pops us behind the lightbox. My lightbox YouTube video works fine, I just need to get rid of the pop up youtube video behind it that doesn’t work.
@Ahmad, This feature is available in our Lightbox Ultimate plugin.
https://www.tipsandtricks-hq.com/wordpress-lightbox-ultimate-plugin-display-media-in-a-fancy-lightbox-overlay-3163
does it allow self-hosted videos to show in lightbox?
@Andreas, mobile devices are designed so autoplay cannot be enforced. This is to make sure the user doesn’t lose unnecessary bandwidth.
How can I turn on autoplay on mobiles?
@Tom, Video Lightbox didn’t have any option to embed shortcode in the widget. We have released an update for it. Please update your video lightbox plugin and see how it goes.
When I try using the shortcode in a text widget all I see is the actual text rather than video or image. Can you give me more details about what to put into the text box to make it work correctly.
@Richard, I have just checked your site. I believe autoplay is not enabled. You can enable it in the settings (Settings->Video Lightbox->prettyPhoto->Autoplay).
Great plugin! I’ll be updating to the developer’s license soon. One small glitch: YouTube video does not autoplay; in settings (for ver. 1.7.2) it says the Autoplay default is true. Whether I click the checkbox or not, I still have to manually play the video. BTW: works great on my Android device also.
@cerojas, Please check the demo page to see how it works:
http://lightbox.tipsandtricks-hq.com/lightbox-ultimate-demo/
I want to display a flash video. Can somebody show me an example please?
GREAT plugin. Nice to be able to serve up videos from vimeo’s fast server instead of our slower one.
You’re a god.
Finally an elegant, robust video lightbox for wp.
Thank you.
Fantastic plugin – does what none of the rest do and actually works well! Thanks Mr. Developer!
THANK YOU VERY MUCH. I don’t usually shout, but I’m pressed for time now and I’m just so pleased to finally find a free plugin that doesn’t have a ridiculous watermark on it! The pdf instructions were awesome, Thanks again!
Excellent plugin… I love it simple clean and fast
Sweet plugin. Works beautifully. Thank you…
@Rik, Currently we don’t have that option in the plugin.
This plugin is great. Thanks a bunch.
Can you please tell me if the following is possible?
I am using your plugin.
I have an image.
When you click the image a light box pops up with a youtube video in it.
I have other videos i would like to incorporate.
I am hoping that when someone clicks my image i will get the lightbox pop up with video. I would like to have my additional videos show up as thumbnails in the light box along the bottom.
A visitor could then scroll through the videos with out have to shut the light box down and relaunch it every time.
So basically lightbox thumbnail video gallery pulling from youtube. youtube part is not a deal breaker but would be great if it happened.
Nice plugin Thank you.
That seems to have done the trick. Not sure how I missed that. Thanks!
@Jordan, do you have “Enable Slideshow” option checked in the video lightbox settings? If so please disable it.
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.
This plugin is goddamn amazing. Seriously has saved me so much time and looks very professional too. Thank yoU!
@Phyllis, the automatic thumbnail option only works with public vimeo videos.
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?
I was able to fix it…there was a problem in mySQL database that I had to fix. Thanks for getting back to me.
@Jeremy, do you have the automatic slideshow option enabled in the settings?
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
@Pulseframe, It’s coming from your theme which is also including the prettyPhoto lightbox script.
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?
@Laurens, There is a checkbox in the video lightbox settings to enable “autoplay” on your videos (Settings->Video Lightbox->prettyPhoto->Autoplay).
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
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!
@Chad, can you please provide a link to the page in question so I can take a look?
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.
Great plugin – exactly what I needed and a piece of cake to instal!
@Guido, currently video lightbox doesn’t work with private vimeo video
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
@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)
How can you change the size of the thumbnail that the user will click on? It’s so small…
Retract that! It seems to be working now. Thanks again for a great plugin that was even easy for a total newbie to use.
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?
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
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?
@jinsmn, do you want to adjust the thumbnail image or the video that opens in lightbox?
Hi, wonderful plugin. I am using it on my website’s gallery page. Is there any option to adjust the auto thumb video size ?
@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:
https://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.