How To Launch Your WordPress Videos In A Lightbox

Lightbox is a widely accepted tool for focussing readers’ attention by darkening the page and overlaying a full-size version of the image.

But if images can benefit from this distraction-free viewing why not other media types? Why not video?

In this article, we’ll look at using the WP Video Lightbox plugin to bring all the benefits of Lightbox to your embedded videos.

The WP Video Lightbox plugin has been around for a while (Sarah wrote about it here in 2012) but it continues to be maintained and provides an excellent way to put videos front and center.

The plugin uses the prettyPhoto jQuery library to bring Lightbox capabilities to your YouTube and Vimeo videos. It works equally well on both desktop and on tablets and is simple to install and use.

Continue reading, or jump ahead using these links:

• Installing The Plugin
• Adding A YouTube Video To A Post
• Finetuning The Lightbox Experience

Installing The Plugin

Of course, we can’t do anything until the plugin is installed, so jump into Plugins > Add New and search for WP Video Lightbox. Install and activate.

Adding A YouTube Video To A Post

WP Video Lightbox provides its own shortcodes for including YouTube and Vimeo videos in a post:

• [video_lightbox_youtube] for embedding a YouTube video
• [video_lightbox_vimeo5] for embedding a Vimeo video

Both shortcodes accept the same 6 attributes:

1. video_id (required) – the service’s unique identifier for the video
2. width (required) – the width of the video playback
3. height (required) – the height of the video playback
4. description – this text is displayed in the lightbox’s footer; accepts HTML.
5. anchor – this text becomes the hyperlinked text that opens the video in a lightbox; accepts HTML.
6. auto_thumb – replaces the anchor text with a thumbnail image of the video

If the anchor attribute is provided then auto_thumb is ignored; if anchor is not provided then auto_thumb must be set to ‘1’.

Here’s some examples using my favorite YouTube video of one of the greatest ever World Cup goals.

Basic usage:


[video_lightbox_youtube
video_id="XsZkCFoqSBs&rel=0"
width="640"
height="480"
anchor="Stunning goal from the amazing Denis Bergkamp"
description="If only Denis Bergkamp was English..."]


(Note: attributes placed on own line for clarity only – don’t do this when creating a post.)

Adding the &rel=0 to the video_id prevents the display of related videos at the end.

Using auto_thumb:


[video_lightbox_youtube
video_id="XsZkCFoqSBs&rel=0"
width="640" height="480"
auto_thumb="1"
description="If only Denis Bergkamp was English..."]


Finetuning The Lightbox Experience

As I mentioned previously, the WP Video Lightbox plugin uses the prettyphoto library and the configuration options for the prettyphoto are all available under Settings > Video Lightbox.

Most are more related to images but there are a few that you might want to ponder for your videos:

• Theme – determines the look and feel of the lightbox. There are 6 themes to choose from.
• Autoplay – if you really wanted to irritate your visitors you can set this to automatically play the video when the lightbox opens
• Modal – controls whether the visitor has to click on the close button to close the lightbox (rather than just clicking anywhere outside the lightbox)

Make The Most Of Your Videos

Whether a video is viewed in its entirety is obviously highly dependent on how engaging it is. WP Video Lightbox can’t help you there but it can help remove all the distractions when the video is being played and let the content.

If you regularly feature videos in your posts then it makes a worthy addition.

Have you used lightbox on your WordPress site? What are your thoughts? Let us know in the comments!

Tags:

• video
• weekend wordpress projects