How to display a VideoPress video in a Widgetkit lightbox on your WordPress website

Posted on January 26, 2012 //

Update: One year after writing this post I deactivated Widgetkit on this website because this was the only post/page where it was needed, and it had thwarted my efforts at only loading its scripts and styles on just this post. This tutorial is still valid, and the code still applies…Widgetkit just doesn’t work on this post anymore.

Recently one of our clients asked me to help them post a video to their WordPress website. YouTube or Vimeo were not good options for a couple reasons, and since this client is a non-profit to whom we donate our services, we needed to keep our costs down as far as possible. On one of my WordPress.com blogs I have a few videos that have been hosted with VideoPress since way back when VideoPress got started, so I decided to take another look at VideoPress as a possibility for this current request.

VideoPress

If you’re reading this blog post, you’re probably already aware that VideoPress has an impressive feature set and at just under sixty dollars a year for 3GB of space it’s a pretty good deal. On top of that, if you’re wanting to use VideoPress on your self-hosted WordPress blog or website you can install the VideoPress plugin which does a great job of integrating the VideoPress service into the WordPress visual editor. One of the things the plugin does is let you embed your videos using a unique shortcode, and the benefit of that is that VideoPress will intelligently decide how to serve your videos, depending on the device and browser your website visitors are using.

But that shortcode feature is also a problem IF you want to display your videos in a lightbox, which is one of my preferred methods, especially on a page with more than a few videos.

The example page for Widgetkit Lightbox shows some of what’s possible with their version of a lightbox, and it has a small “How To Use” section that is limited. Very limited. Fortunately there is additional documentation available in the control panel for the plugin, but it still wasn’t enough to solve the problem at hand. I’ll come back to that later in the post.

I should also mention that the stripped-down version of Widgetkit is available as a free download, and it does include the Lightbox. I haven’t bought the full version yet, but it’s on my short-term wishlist.

Convincing VideoPress and Widgetkit to play well together

Using VideoPress to simply embed a VideoPress video into your content works very well, especially with the shortcode, as you can (hopefully!) see in this short video we call “Seasons,” made by one of my daughters when she was ten. I’ll be using this video as the example throughout the rest of this post, and this instance is using the embed shortcode along with w=633 to define the width of the video.

And using Widgetkit to display videos from YouTube or Vimeo in a lightbox also works well (with the proper syntax), especially on mobile devices, which is one reason I started using it. I referred to this site earlier, but here it is again if you want to see the Widgetkit Lightbox in action with multiple videos.

However, I was not able to make VideoPress and Widgetkit play together at all, so I turned to Google to see what I could find.

Embedding the flash version is one not-so-good option

After searching on Google I pieced a couple ideas together and was able to get the flash version of the video to work in the lightbox, and if nothing else this was a fallback position. One problem with this approach was that it didn’t work on my iPad, and it would be limited on other mobile devices as well. Here’s an example of the flash version of “Seasons.”

Using the shortcode to embed is a better option

For reasons I mentioned previously, using the shortcode provided by VideoPress is a better option, but combining that with the lightbox just wasn’t working for me until I went back and looked at the page source code on the Widgetkit Lightbox example page at YOOtheme. After studying that code I determined that what we want to do here is follow the “Inline” example so that the Lightbox will run that shortcode as HTML, which should produce the result we’re looking for.

The first DIV is displaying the screenshot image link that activates the lightbox (using data-lightbox) and tells the lightbox where to look for the linked content to display (href=”#U0t5LnWv”).

The second set of DIVs is where the coolness happens. The outer DIV is styled as “display:none” so that it doesn’t appear in the browser, and the inner DIV has the unique ID that the link in the first DIV is referring to. You could use anything for that ID as long as it’s unique – I decided to use the shortcode for the video to make sure it’s one-of-a-kind.

The content of that inner DIV is the VideoPress shortcode which, when processed as HTML by the lightbox, displays our video.

I played around with the width and height settings for a while until I came up with a solution that worked across the board. You can do the same or you can just take my word for it that the style of the inner DIV needs to specify the same width and height that is specified in the video shortcode. Leave out any of those parameters and the results won’t be what you’re after. You also need to include the overflow:hidden attribute or you’re going to get one or both scrollbars appearing in the lightbox.

I didn’t do this in the above example, but you could also set the video to autoplay when the lightbox opens by adding autoplay=true as an additional parameter to the shortcode.

Final thoughts

Before I worked out this solution I came really close to cancelling my VideoPress subscription and opting for a Vimeo Pro subscription. I may still make that move at some time in the future, but at this point saving $140/year is kind of attractive. I’m also expecting the VideoPress developers to be making continual improvements, and being something of a WordPress fanboy I’ll stay with VideoPress and see what good things are in store.

Hopefully this article helps someone else make this work on their site, and if you see a way to clean up the code examples or you have another solution, be sure to let us know in the comments section.

Comments

I’ve spent endless hours looking for documentation on setting up Widgetkit! Not much out there! This helps so thanks for sharing! I’m struggling to understand how to construct a slideshow to display a .jpg image, next slide a .wmv video, next slide some copy with a pic. I’m using joomla 2.5. I’m able to get a slideshow going on the frontend, but only .jpg’s? looks like i need lightbox for video but how does one get video into the slideshow? i see examples of strings for video or audio but where do i apply them? i’m super confused. I prefer video from my host ../images/video/film.wmv etc to play, not youtube etc.

Sorry about the delay – I just noticed your comment. Were you able to get the different media formats into the same slideshow?

And are you using the free or paid version? It looks like the free version includes a lite version of the slideshow, but I haven’t seen where they explain the additional features and/or capabilities in the paid version of the slideshow.

1. It looks like you’re linking directly to the video rather than to the hidden div. So you’d want to change href=”http://videos.videopress.com/LkCbSXnD/raw-kitchen-series-promo_fmt1.ogv” to href=”LkCbSXnD”

2. The format of the video might be an issue too. WordPress is outputting that video as an .ogv file which may be preventing it from playing in iOS. Did you use the shortcode for that video inside the hidden div rather than the Ogg File URL?

I did direct it to the video, because I couldn’t get it to function via the shortcode.. In theory all I should have to do is use your code with the videopress ID and image replaced… right? I’m still learning about this, so please forgive the pestering.

Am I missing a step in the hosting of the video, or some code that you haven’t got listed here? Thanks!

Check your code for the link and the image – you’ve got some extra characters in there. I don’t think I can paste HTML in this comment, but check out the attached screenshot with the highlights that need correcting.

I also have my videos set in VideoPress to only display on certain websites. I just added your site to the list and I was able to play the video on your page by turning off “display: none;” for that hidden div (using Firebug).

You may want to check your Video player settings under Settings > Media in the WordPress.com account that you’re using to manage VideoPress. The checkbox for Free formats needs to be unchecked if you want your videos to play in iOS.

What my clients are saying…

In the fast-paced world of web design, responsiveness and accuracy are key to an effective web presence. John Sundberg of Black Hills Web Works delivers on both accounts. He understands HTML, CSS & PHP like no one I’ve met and has the ability to troubleshoot any web coding issue that I have promptly. As a graphic designer, I often get bogged down in the coding areas, and John has saved me more than once. He is amazing with WordPress, writes programs for the WordPress Community and is known for being a resource to many of us in the industry. Can’t thank John enough for how he has helped me with my business.