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.3
Date Modified
2016-09-09
Operating System
WordPress 4.6
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

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

Check out 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 (193 responses)

  1. wpcommerce says:

    @Ilema, Unfortunately we don’t have integration with any button plugin. When you use a video lightbox shortcode it creates a text/image link (It depends on what you specify in the anchor parameter). You just click on that link to open lightbox.

  2. Ilema says:

    Hi there, does anyone know how to use the Video lightbox with Maxbuttons? My button says Watch this, then I want the video to play in the embedded light box. I don’t know coding very well! Do I add the lightbox shortcode in maxbutton or the maxbutton code in lightbox?

  3. wpcommerce says:

    @Jeff, Please replace “?rel=0” with “&rel=0” and see how it goes. Please see the “How to Turn Off the Related Videos” section for details.

  4. Jeff says:

    Hi, I am looking for the html code to not play related videos.

    I embeded my video with this code, works perfect but would like the option to get rid of the related videos at the end.. I put in “?rel=0” at the end of my link but its not working.

    Thanks

  5. wpcommerce says:

    @Elmi, Video Lightbox doesn’t use any API. It simply inserts the YouTube embed code.

  6. Elmi says:

    Hi, Does WP Video Lightbox supports youtube API? It does not seem to work when I use the inline content opened in wp-video-lightbox to handle youtube function onYouTubeIframeAPIReady()

    Thanks in advance.

  7. wpcommerce says:

    @Laurence, We only support popup from either a text link/image in both of our plugins. Button is not supported at the moment.

    I have checked the HTML code for your watch video button. It’s not actually a button. It’s just a text link that looks like a button. So you should have no issue opening popup from it.

  8. Laurence says:

    Hello, I’m currently using the standard version of WP Video Lightbox and love the way that it’s working but would like to open up a lightbox with a button. Is there a way to use an HTML link to open a video lightbox or must it always be an embed code with an image. You can see that my first slide on the page below will open a Video Lightbox when clicked but I would like to have the “Watch Video” button open the lightbox. Can i do this with the Ultimate version?

  9. wpcommerce says:

    @Will, Are you using our free video lightbox? It’s already compatible with https. If it’s not working that means you have some other incompatible plugin that is overriding the JavaScript library. You can easily check it in your browser console.

  10. Will Steuber says:

    We recently upgraded our site to SSL and the lightbox no longer plays youtube videos. If we upgrade to a purchased version of the plug-in, will it work?

  11. wpcommerce says:

    @Gary, Currently the plugin only supports text/image link.

  12. Gary K says:

    Is there any way to specify shortcode for a button in the anchor, or can you only use text and image?

  13. wpcommerce says:

    @Nancy, Your theme seems to be also including the prettyPhoto lightbox library. Can you please disable it?

    Video Lightbox is compatible with HTTPS. But it cannot control which library will get included when a page renders. Unfortunately in this case your theme one is getting included which is not compatible with HTTPS by default.

  14. Nancy Verdi says:

    Hello, the youtube short code is not working for me. Am I doing something wrong? I tried it both ways with no success.

    [video_lightbox_youtube video_id="z0TbPRiYZkF" width="640" height="480" auto_thumb="1"]
    [video_lightbox_youtube video_id="z0TbPRiYZkF" width="640" height="480" anchor="https://example.com/wp-content/uploads/2016/03/video-thumb.jpg" alt="business website design"]

    videos can been seen on this test page I created. https://hummingbirdwebdesign.com/video-test/

  15. wpcommerce says:

    @Savannah, We don’t have any slider feature in our plugin. What you can do is edit the image link in your slider so it can pop up a vimeo video in lightbox. You don’t really need to make a lot of changes. Just adding a rel="wp-video-lightbox" in the link should do the trick. Please check our usage instructions guide for details.

  16. Savannah says:

    Is it possible to use vimeo light boxes in a layer slider? For example, have the thumbnail image of the video as the layer slider image, and if the user clicks the thumbnail, the lightbox of the video will appear

  17. wpcommerce says:

    @Jadmo, You just add shortcodes to the page to embed videos.

  18. JADMO says:

    Hi, how I can embed more than one video?

  19. wpcommerce says:

    @Cathy, We don’t display any share option in our video lightbox plugin. You may have another lightbox plugin installed which is applying these settings.

  20. Cathy says:

    Can I disable the “share” and “like” options on the videos in the paid and/or free versions?

  21. Jas says:

    That did the trick thanks!

  22. wpcommerce says:

    @Jas, Have you disabled the “autoplay slideshow” checkbox in the settings (Settings->WP Lightbox->Library Settings->prettyPhoto settings)?

  23. Jas says:

    Hello,
    I have a vimeo video that keeps restarting in lightbox. Any ideas?

  24. Laura says:

    Thanks for this great plugin. Everything works perfectly.

  25. wpcommerce says:

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

  26. Sam says:

    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.

  27. wpcommerce says:
  28. Ahmad Ali says:

    does it allow self-hosted videos to show in lightbox?

  29. wpcommerce says:

    @Andreas, mobile devices are designed so autoplay cannot be enforced. This is to make sure the user doesn’t lose unnecessary bandwidth.

  30. Andreas says:

    How can I turn on autoplay on mobiles?

  31. wpcommerce says:

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

  32. Tom says:

    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.

  33. wpcommerce says:

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

  34. Richard Powell says:

    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.

  35. wpcommerce says:

    @cerojas, Please check the demo page to see how it works:

    http://lightbox.tipsandtricks-hq.com/lightbox-ultimate-demo/

  36. cerojas says:

    I want to display a flash video. Can somebody show me an example please?

  37. kyle says:

    GREAT plugin. Nice to be able to serve up videos from vimeo’s fast server instead of our slower one.

  38. Jason Fonceca says:

    You’re a god.

    Finally an elegant, robust video lightbox for wp.

    Thank you.

  39. Andrew says:

    Fantastic plugin – does what none of the rest do and actually works well! Thanks Mr. Developer!

  40. Peter says:

    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!

  41. TK says:

    Excellent plugin… I love it simple clean and fast

  42. Christi says:

    Sweet plugin. Works beautifully. Thank you…

  43. wpcommerce says:

    @Rik, Currently we don’t have that option in the plugin.

Speak Your Mind

*