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

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

VideoPress logoIf 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 Widgetkit lightbox from YOOtheme

Widgetkit logoNot long ago YOOtheme released an impressive collection of plugins called Widgetkit that has, among other features, a well-rounded lightbox that reminds me of the oh-so-powerful RokBox from RocketTheme that I used extensively in my Joomla days. Until now, WordPress hasn’t really had a lightbox available that was comparable to RokBox, as even the WordPress version of RokBox isn’t up to par with the Joomla version. (At least it wasn’t the last time I looked.)

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.

Gist – VideoPress embed shortcode with width

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

Seasons screenshot

The code I used for this started with the embed code provided by VideoPress, which looks like this:

Gist- VideoPress embed code

Then by trimming that code down to the source link combined with the shortcode and using it as the image link, we end up with this:

Gist – VideoPress embed code trimmed down and used as image link

The important parts to notice there are the href and data-lightbox attributes, specifically:

href=”http://s0.videopress.com/player.swf?guid=U0t5LnWv&v=1.03″ data-lightbox=”width:400;height:300″

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.

Here’s what that code looks like for our example:

Gist – VideoPress shortcode combined with the Widgetkit Lightbox

Here’s the working example of the VideoPress shortcode combined with the Widgetkit Lightbox:

Seasons screenshot

And here’s my explanation of what’s happening there:

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

  1. says

    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.

    Any suggestions?

    • says

       Hey Dominic,

      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.

  2. says

    Hi John. Great walkthrough of your solution. I’ve got it up and running, but I’m having problems viewing the video via my iphone.. Any idea why this might be happening?? Thanks for the knowledge

    • says

      Hi Maximillian.

      Not sure why that’s happening. I just checked my post on the iPad and iPhone and the video worked on both of those. What’s the address of the site you’re having trouble with?

      John

        • says

          Hey Max,

          I see a couple possibilities…

          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?

          John

          • says

            Hi John,

            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!

          • says

            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.

            You can see the clean, raw code at this link: https://raw.github.com/gist/1696423/6455230061b483c64f8d3c764652e819d44b7555/gistfile1.html

            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.

  3. Eric says

    thanks for the awesome solution. I had very exact issue and not able to get any help from WP support. They pointed me to get solution from YooTheme.