Colin Devroe

Reverse Engineer. Blogger.

Figuring out the proper dimensions to embed the Viddler player using JavaScript or PHP

October 18, 2008

Pickles helps out. Circa January 2007.

Viddler’s player is, in my incredibly biased opinion, the best Flash video player available. Especially if you’re of the sort that likes to engage in conversation or put an incredible amount of metadata in your videos.

Using Viddler’s API for various projects has always resulted in some sort of learning experience for me. Not only in using APIs in general, but in how to best utilize Viddler’s platform, player, API, etc. etc. to get the best results. This helps to improve Viddler’s services, but also the Web at large.

One of the things I, and the entire team at Viddler, have learned is that most people want their player to perfectly wrap their video. That is, they’d like their video to be as chromeless as possible while retaining the conversational quality of the enhanced timeline that Viddler affords.

Knowing this we were excited when oEmbed, and its underlying methodology, allowed for this to happen programmatically.  This made it rather easy for developers, such as the team at Pownce, to use this service on Viddler to embed videos knowing only the URL assigned to it, in a way that shows off the quality of the player, and keeping the aspect ratio of the video that the publisher created. Perfect.

That one underlying and undocumented feature of oEmbed, that is, that the response from oEmbed was an embed code with the dimensions perfectly suited for your video based on a maximum width – is what I think will make the following JavaScript useful to developers using Viddler’s API.

The response from the API method of viddler.videos.getDetails includes the dimensions of the original video uploaded.  It does not, however, include the embed code of the proper dimensions given a specific width. You have to either figure that out own your own, use oEmbed (which is yet another call), or do the math yourself.

Included in this simple ZIP file is both the JavaScript and PHP functions you would need to determine the appropriate height for a video given a specific maximum width.  These files do not include the ability to use the oEmbed service. For that, you will need phpViddler or your own homegrown way to call that service.

Happy embedding!