Curated by: Luigi Canali De Rossi

Tuesday, December 26, 2006

Online Video Publishing - Customize Your Blog Or Webpage With Google's API

Sponsored Links

Online video is a great way to add rich content to your blog or website, whether you are keeping a personal journal or running a for-profit operation. The Google Ajax Search API is a great way of being able to customize the way you display your video content in a visually rich way that you can adapt with the minimum of technical knowledge.


Think of it as a great way to call search information right out of Google Video, and compile it together into customizable 'video bars' that you can resize, position anywhere on your website and let your site visitors browse visually. This adds an intuitive way for your visitors to access targeted video content that goes beyond the simple text-based, descriptive approach.

The GSVideoBar Solution gives you everything you will need to get these great looking video bars onto your website by copying and pasting a few lines of code into your blog post or website template. While there are Web Widgets like the incredibly impressive Blinkz.TV Video Wall that will do this for you, the advantage of using the API approach is the ability to tinker with its look.

Want to change the size of the individual video clips? No problem. Want to position your video bars across the top of the screen, the bottom, running along the side? Again, you have the power to choose. This makes for a video search display that will not only be suited to your site visitors tastes, but also to the parameters of your webpage or blog, giving you the flexibility to truly integrate the content into the look and feel of your website.

In this brief introduction, I take you through the simple process, before showing you the end results in action.

What is the GSvideoBar Solution?

To cut a long story short, the GSvideoBar Solution is an application that allows you to tap into the power of Google Video Search and the Google Ajax Search API to gather together videos on a particular search term, and organize them in a film-strip like bar on your website.

The Google people describe it like this:

''The GSvideoBar Solution is a simple to use application of the Google AJAX Search API that is designed to let you easily add application and page controlled video search and playback capabilities to your pages, sites, and blogs.

In this solution, the videos are displayed in a horizontal or vertical bar and there is no search form or tag stack. The solution composes nicely with the Video Search Control solution as well as other Video Bar solutions running on the same page.''


In other words, you can have as many of these bars on your website as you like. The features list is quite impressive, and includes:

  • An ability to display a collection of videos in either horizontal or vertical orientation.
  • A set of four or eight video thumbnails that will play directly on your page.
  • An ability to compose with other instances of the Video Bar solution or Video Search Control solution. The net effect is that multiple solutions may share a single video player. Interaction between your search bars is possible, to create some interesting effects.
  • The solution is designed for extreme ease of use. As a site designer you are able to control the initial search expression, how many search results appear, the search result orientation, the location of both the player and the search results.

If, like me, you are scared at the idea of too much code-tinkering, the great guys at Google have even supplied a ready-to-cut-and-paste version at the bottom of the service's webpage. So, while there are almost infinite possibilities for those with a bit of Javascript know-how, even rank-amateurs like me can make use of this impressive service to brighten up their websites.

All you need to do is scroll down to the bottom of the page and copy everything in the Hello World of GSvideoBar section, and then change one tiny parameter, which I have highlighted in the image below:


You just need to swap the part where it says "vw gti" with your own search term, such as "masternewmedia", "Robin Good" or anything else you might be interested in finding videos about. It's that simple.

The results, if you change nothing else, look like this. On your website, the thumbnails on the left will determine the video playing in the player on the right. Try to click on anyone of the video clip thumbnails displayed on the left column.
GSvideoBar Sample


The ability to customize the service

The example above is impressive in its own right, and could be embedded in the appropriate part of your blog or website template as quite a striking way of granting access to online video. If you, or your webmaster do have even the most basic Javascript and CSS skills, a lot more can be achieved, however.

The examples on the service's own website illustrate how you can have video bars interact with one another, so that one controls the others, and it is certainly well within the reach of those with a modicum of technical knowledge to arrange several of these video bars on the same page with perfect integration.

Whatever your level of knowledge about these things, the GSvideoBar Solution offers a great way of tapping into the rich media qualities of online video, and bringing an intuitive and visually-driven approach to the navigation of this content.

Additional Resources

If you are interested in learning more, you might like to visit:

Reference: Google Playground [ Read more ]
Readers' Comments    
blog comments powered by Disqus
posted by Michael Pick on Tuesday, December 26 2006, updated on Tuesday, May 5 2015

Search this site for more with 








    Curated by

    New media explorer
    Communication designer


    POP Newsletter

    Robin Good's Newsletter for Professional Online Publishers  



    Real Time Web Analytics