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.8.4
Date Modified
2017-06-12
Operating System
WordPress 4.8
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.5 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

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

Check out my projects page for more cool WordPress plugins.

Comments (208 responses)

  1. Les says:

    Thanks for your reply – custom CSS has worked.

    I found the plugin CSS code and after trying a few changes I could resolve it by using adding this code snippet:

    margin-left: auto;
    margin-right: auto;

    I then removed that code from the plugin CSS and added this custom CSS into my theme options:

    .wpvl_auto_thumb_box{
    position: relative;
    width: 200px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    }

    That has resolved the location problem, so thanks for your suggestion about custom CSS and your help.

  2. wpcommerce says:

    @Les, Have you tried any custom CSS to align the image? Please provide a link to the page in question so I can take a look.

  3. Les says:

    I’m using WP Video Lightbox v1.8.4.

    The plugin works well but I have one problem – the video thumbnails always default to the left of the page.

    It doesn’t matter how I try to position them – center or right they ignore the formatting and appear on the left.

    I have tried the plugin on three different sites with different themes and the result is always the same.

    How can I fix this?

  4. wpcommerce says:

    @Jacob, Autoplay doesn’t work on mobile devices. It’s something disabled in the core hardware by the manufacturer. They designed it so the video will only play when the user initiates it (This prevents unnecessary bandwidth loss when the user is on a metered connection).

  5. Jacob says:

    Hi there, I’m using your “WP Video Lightbox” plugin…. It work great!
    I want to make one tweak to it:
    – Make auto play video on mobile so we don’t have to tap twice to see video.

    So you see when we tap on a video card in this page it show a small thumbnail of video then if we tap on it we see video on mobile. So I would need to jump this thumbnail and get straitght to video player on mobile.

    I’m using and NOT shortcode. And I may have a few tweek to do on the desktop version also.

    I need your help asap to finish this video thing.

    Thank you veru much.

  6. wpcommerce says:

    @Danielle, Disabling the “Autoplay Slideshow” option in the prettyPhoto settings should fix this issue.

  7. Danielle says:

    Hi, When I use your YouTube shortcode the lightbox refreshes every 2-3 seconds. Is there something I might be missing?

    Thank you!

  8. wpcommerce says:

    @Sukuma, You don’t need to add any extra code to the shortcode. You can easily enable autoplay in the video lightbox settings.

Speak Your Mind

*