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 Widgetkit lightbox from YOOtheme
Not 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.
VideoPress embed shortcode with width
[wpvideo U0t5LnWv w=633]
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.”
The code I used for this started with the embed code provided by VideoPress, which looks like this:
VideoPress embed code
<embed type="application/x-shockwave-flash" src="http://s0.videopress.com/player.swf?v=1.03" width="400" height="300" wmode="direct" seamlesstabbing="true" allowfullscreen="true" allowscriptaccess="always" overstretch="true" flashvars="guid=U0t5LnWv&isDynamicSeeking=true"></embed>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:
VideoPress embed code trimmed down and used as image link
<div style="text-align: center;"> <a href="http://s0.videopress.com/player.swf?guid=U0t5LnWv&v=1.03" data-lightbox="width:640;height:480"> <img title="Seasons screenshot" src="http://www.blackhillswebworks.com/wp-content/uploads/2012/01/seasons-screenshot.jpg" alt="Seasons screenshot" width="400" height="286" /> </a></div>The important parts to notice there are the href and data-lightbox attributes, specifically:
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:
VideoPress shortcode combined with the Widgetkit Lightbox
<div style="text-align: center;"> <a title="Seasons" href="#U0t5LnWv" data-lightbox=""> <img title="Seasons" src="http://www.blackhillswebworks.com/wp-content/uploads/2012/01/seasons-screenshot.jpg" alt="Seasons screenshot" width="400" height="286" /> </a></div>
<div style="display: none;"> <div id="U0t5LnWv" style="width: 633px; height: 475px; overflow: hidden;"> [wpvideo U0t5LnWv w=633 h=475] </div></div>Here’s the working example of the VideoPress shortcode combined with the Widgetkit Lightbox:
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.
