You Tube Video Bar

You tube video bar is another fancy Google application which will help you to add you tube video, with predefined search queries of your choice and direct access to the you tube channel, in your blog or web site. It will add the videos in a beautiful way vertically or horizontally. All you can see the static image of you tube videos in your site but when you will click there will be a player to play the video. You can switch off the video player also. Here is an static image whic I got from screen shot.
video Bar

I will discuss the things you can do with you tube video bar.

Search query Parameter:
You can use your own search query to search video and to show it in your site. There are some built in parameter that you can pass after getting the normal code from here Generate the code

autoExecuteList : {
executeList : ["ytfeed:most_viewed.this_week","ytchannel:fordmodels"]

This block of code is responsible for your video search through AJAX Search API

* A query expression of ytchannel:fordmodels will access the fordmodels channel
* A query expression of ytfeed:most_viewed will access the Most Viewed YouTube Videos
* A query expression of ytfeed:top_rated will access the Top Rated YouTube Videos
* A query expression of ytfeed:recently_featured will access Recently Featured YouTube Videos
* All of the ytfeed: based expressions also accept time modifiers of .today, .this_week, .this_month, or .all_time. For example, the search expression ytfeed:most_viewed.this_month provides access to the Most Viewed YouTube Videos this month.

Changing Player Design and Size:
You can also change the video player design and style by modifying the gsvideobar.css which will come along with sample code as a link though. Just download the file and modify. The default player size is 260px and 195 px. These dimensions are controlled using the .playerInnerBox_gsvb .player_gsvb CSS rule which is defined in gsvideobar.css. If you want to change the size of player just override those lines in your script.

/* override standard player dimensions */
.playerInnerBox_gsvb .player_gsvb {
  width : 320px;
  height : 260px;

Auto execute List:
You can refresh the video bar content by specifying a cycle time (short, medium, and long). You can also specify the cycle mode. The following code snippets will demonstrates both of these.

// Note: the value of autoExecuteList.cycleTime may be
// -- GSvideoBar.CYCLE_TIME_SHORT     // ~10s
// -- GSvideoBar.CYCLE_TIME_MEDIUM    // ~15s
// -- GSvideoBar.CYCLE_TIME_LONG      // ~30s

autoExecuteList : {
largeResultSet : true,
cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
executeList : ["ytfeed:most_viewed.this_week","ytchannel:fordmodels"]

Floating video Player:
This function of video bar allows to manually place a video bar in the web page.

You can see the live demo here
Advance documentation about the video bar is here


About Mazharul Anwar

A PHP and javascript nerd believe in web applications and open source goodness. Ex MS Windows user converted to linux fanboy and love gadgets. Coding in python and maintaining servers become my passion. Website performance and optimization geek.
This entry was posted in Programming, Websites. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s