fancy lightbox overlay

4/16/2014 WordPress Video Lightbox Plugin - Display Videos in a Fancy Lightbox Overlay | Tips and Tricks HQ

http://www.tipsandtricks-hq.com/wordpress-video-lightbox-plugin-display-videos-in-a-fancy-lightbox-overlay-2700 1/19

WordPress Video LightboxPlugin Display Videos and

Images in a Fancy Lightbox

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.

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 wasnt working with this change and I was getting the following

Keep in Touch

Follow us for weekly new posts, free

plugins, tips, news and site updates

Featured & Popular Articles

Featured WordPress Plugins

Tips and TricksHQ

HOME ABOUT PROJECTS PRODUCTS SUPPORT

AFFILIATES CONTACT



App Category WordPress Plugin

Software Name WordPress Video Lightbox

Version 1.6.3

Date Modified 2013-12-12

Operating System WordPress 3.8

Description Embed your videos using a fancy lightbox

Fi le Format application/zip

Download

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

Download WP Video Lightbox

Download the WP Video Lightbox Plugin from here.

Works with the latest version of WordPress.

Requires WordPress 3.0 or higher.

Recent Posts

HeartBleed Vulnerability and

WordPress Site Owners (What Y

[...]

Why Appealing to Emotion is Good

for Your Blog [...]

Enterprise Twenty Thirteen

(2013) Child Theme for WordPr [...]



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

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

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

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

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:

at the end of the video ID which will turn off the related videos

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"

How to Create a Password

Protected Download in WordPress

[...]

How to Accept Bitcoin on Your

WordPress Site [...]

Comment & Socialize

@Harry, You can't set expir ...

- admin

Hi, thanks for this. Most o ...

- Harry

@Pulseframe, It's coming fr ...

- wpcommerce

@Paul, Lightbox Ultimate vi ...

- wpcommerce

I have this appearing at th ...

- Pulseframe



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

page for more cool WordPress plugins.



WordPress Simple Paypal Shopping Cart Plugin

WordPress Easy Paypal Payment or Donation Accept Plugin

How to Create WordPress blog posts and pages (Video Tutorial)

WordPress Plugin for Category Specific RSS feed subscription menu

WordPress Paypal Donation Plugin

tagged with: jquery, web development, wordpress,

wordpress plugin, wordpress video, wordpress video lightbox,

Found this resource interesting? Subscribe to Tips and Tricks

Comments (139 responses)

@Pulseframe, Its coming from your theme which is also including the

I have this appearing at the bottom left side below each video:

Should this be appearing social buttons or its 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

Works perfect, shows up nice and tidy, only problem i have is that i want the video

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.

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 didnt realize I had another one as well. Sorry for the

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

My video opens in the pop-out fine but it also opens YouTube in a

separate window/tab. I cant 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 doesnt work with private vimeo video

i have a problem with the auto_thumb parameter. the thumbnail didnt visible by

@Sean, You can customize the size of the thumbnail the wp-video-

lightbox.css file (its in the root directory of video lightbox plugin)

How can you change the size of the thumbnail that the user will click on?



It seems to be working now. Thanks again for a great plugin

that was even easy for a total newbie to use.

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.

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

Ok, I can see in the comments below that if you edit autoplay= true in the plugin

editor, this should make the videos auto play once the lighbox appears.

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

Ive 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

Hi, wonderful plugin. I am using it on my websites 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

has a shortcode which allows automatic YouTube video popup

when the page loads. Here is the documentation with a list of all the supported

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.

Great plugin, is there a way that when the page loads it triggers the light

box and starts playing the video automatically?

Cant get autoplay to work for vimeo though.

Also, is there a way to add a hover over effect to thumbnail images (ie: display a



Started using this after another modal plugin broke when I upgraded

Using this and Compact Audio player for my husbands site. Thanks for

the tips and tricks too! Its perfect!

@CbrisB, The mod Leslye submitted is to automatically create and

generate a thumbnail image from the video and use that as an anchor.

From the comments I have read here the autostart is not supported by

Is it supported if the user WP Video Lightbox Thumbnail Mod

php file is loaded?

If not, what is the above mod for?

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



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 its the best plugin Ive ever found I reckon. well done

Awesome plug-in! makes it all so simple.

The plugin really worked for me. It has made my work easy. Thanks for

the noble work!!!

Nice plugin that actually works. I tried another version wp lightbox plus

colorbox plugin that I couldnt 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-

to use image. and I put the rel=0 after id to show no related

Thanks for all your help.

Very nice and handyhats off to u



Really great plugin, thank you! Very clean, works as advertised and really

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

@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

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

This was the answer to my prayers. EXACTLY what I needed! Stumble

onto it, glad I found this plugin. Thanks a bunch!



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

http://youtube.com/watch?v=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

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

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:



Great documentation, otherwise! You rock.

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

http://player.vimeo.com/video/48556589

http://player.vimeo.com/48556589

part and that solves the problem. Im sure the

documentation tells you that somewhere but I missed it

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

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)



Oh well, just use followed instructions!

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

Great Plugin! Works like a charm! Is there any chance to get this plugin

to autorun the videos in lightbox?

Already using this plugin and working perfectly.

Just wanted to thank you for a super plugin!

If you want autoplay, go to plugin editor, and put the value of autoplay=



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

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

Name *

Email *

Website

Categories

Blog Setup

Blogging Tips



Featured

General

Make Money

News

Online Marketing

SEO

Shop Admin Tips

Site Optimization Tips

Tech Tips

Video Tutorial

Web Design

Web Development

Wordpress

Wordpress Plugin

WordPress Theme

Search

Search

Your Shopping Cart



Shopping Cart is

Empty

Visit The Shop

About Us

Here at Tips and Tricks HQ, we publish practical and

useful articles for web developers, WordPress admins

and web masters. If you have a WordPress site and

you like to continually make an effort to improve

your site then feel free to subscribe and stay tuned

for some great content ... Read More

Our Projects

If you want to sell something from your WordPress site

then chances are that we have an easy to use and

simple solution for you. We have a range of WordPress

plugins that can help you accept money from your

customers and turn your site into an eCommerce

platform ... Read More

Our Customers

Love your software for WordPress, in large part

because not only do they work well, you also have

accurate and easy to follow instructions. A huge shout

out to the team at Tips and Tricks for providing the

most fantastic, easy to use, robust plugins for

WordPress. Glad I found your stuff ... Read More

Copyright 2014 | Tips and Tricks HQ | Search this SiteReturn to top of page

fancy lightbox overlay

Documents

robustvideo lightbox

wordpress lightbox ultimatehow

video playback

video id

video pops

new vimeo video

embedded videos

videos playable