AJAX

google ajax search api ( youtube videoBar)

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Aug 2008

Posts: 3

Reputation: joemalaya is an unknown quantity at this point

Solved Threads: 0

joemalaya

Offline

Newbie Poster

google ajax search api ( youtube videoBar)

Aug 20th, 2008

Hello guys,
I want to put youtube video bar in my website... and i already found the way to do it. Using google ajax search api. Google already provide the wizard to generate the code.
http://www.google.com/uds/solutions/wizards/videobar.html

The problem is, by default it shows only 4 videos for horizontal view. I am really having trouble to increase the video number.Can anyone suggest me any alternatives or some modifications.

code snippet

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!-- ++Begin Video Bar Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->
 
  <!--
  // The Following div element will end up holding the actual videobar.
  // You can place this anywhere on your page.
  -->
  <div id="videoBar-bar">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>
 
  <!-- Ajax Search Api and Stylesheet
  // Note: If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  -->
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>
 
  <!-- Video Bar Code and Stylesheet -->
  <script type="text/javascript">
    window._uds_vbw_donotrepair = true;
  </script>
  <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
  </style>
 
  <style type="text/css">
    .playerInnerBox_gsvb .player_gsvb {
      width : 320px;
      height : 260px;
    }
  </style>
  <script type="text/javascript">
    function LoadVideoBar() {
 
    var videoBar;
    var options = {
        largeResultSet : !true,
        horizontal : true,
        autoExecuteList : {
          cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
          cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
          executeList : ["ytfeed:most_viewed.this_week"]
        }
      }
 
    videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
                              GSvideoBar.PLAYER_ROOT_FLOATING,
                              options);
    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadVideoBar);
  </script>
<!-- ++End Video Bar Wizard Generated Code++ -->
<!-- ++Begin Video Bar Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->

  <!--
  // The Following div element will end up holding the actual videobar.
  // You can place this anywhere on your page.
  -->
  <div id="videoBar-bar">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <!-- Ajax Search Api and Stylesheet
  // Note: If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  -->
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Video Bar Code and Stylesheet -->
  <script type="text/javascript">
    window._uds_vbw_donotrepair = true;
  </script>
  <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
  </style>

  <style type="text/css">
    .playerInnerBox_gsvb .player_gsvb {
      width : 320px;
      height : 260px;
    }
  </style>
  <script type="text/javascript">
    function LoadVideoBar() {

    var videoBar;
    var options = {
        largeResultSet : !true,
        horizontal : true,
        autoExecuteList : {
          cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
          cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
          executeList : ["ytfeed:most_viewed.this_week"]
        }
      }

    videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
                              GSvideoBar.PLAYER_ROOT_FLOATING,
                              options);
    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadVideoBar);
  </script>
<!-- ++End Video Bar Wizard Generated Code++ -->

•

Join Date: Jun 2006

Posts: 7,576

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 461

~s.o.s~

Offline

Failure as a human

Re: google ajax search api ( youtube videoBar)

Aug 22nd, 2008

Maybe reading the GSVideoBar reference can help you in properly customizing your video bar. As for your problem, you can decrease the size of thumbnails or increase the dimensions of your DIV to get more than 4 videos per strip. For further tweaking please refer the official documentation and in case of queries post in the Google Ajax Search API user group to get a quick response.

Here is a sample snippet:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>GSvideoBar Sample</title>
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0"
    type="text/javascript"></script>
  <link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet"
    type="text/css"/>
  <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js"
    type="text/javascript"></script>
  <link href="http://www.google.com/uds/solutions/videobar/gsvideobar.css"
    rel="stylesheet" type="text/css"/>
 
  <style type="text/css">
    body, table, p{
      background-color: white;
      font-family: Arial, sans-serif;
      font-size: 13px;
    }
 
    td { vertical-align : top; }
 
    #videoBar {
      width : 100%;
      margin-right: 5px;
      margin-left: 5px;
      padding-top : 4px;
      padding-right : 4px;
      padding-left : 4px;
      padding-bottom : 0px;
    }
  </style>
  <script type="text/javascript">
    function LoadVideoBar() {
      var videoBar;
      var barContainer = document.getElementById("videoBar");
 
      var options = {
        largeResultSet : true,
        horizontal: true,
        thumbnailSize : GSvideoBar.THUMBNAILS_LARGE,
        autoExecuteList : {
          cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
          cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
          executeList : [ "ytfeed:most_viewed.this_week", "bud light",
                          "ytchannel:fordmodels", "vw gti" ]
        }
      }
 
      videoBar = new GSvideoBar(barContainer, GSvideoBar.PLAYER_ROOT_FLOATING, options);
    }
    GSearch.setOnLoadCallback(LoadVideoBar);
  </script>
</head>
<body>
    <div id="videoBar">Loading...</div>
</body>
</html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>GSvideoBar Sample</title>
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0"
    type="text/javascript"></script>
  <link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet"
    type="text/css"/>
  <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js"
    type="text/javascript"></script>
  <link href="http://www.google.com/uds/solutions/videobar/gsvideobar.css"
    rel="stylesheet" type="text/css"/>

  <style type="text/css">
    body, table, p{
      background-color: white;
      font-family: Arial, sans-serif;
      font-size: 13px;
    }

    td { vertical-align : top; }

    #videoBar {
      width : 100%;
      margin-right: 5px;
      margin-left: 5px;
      padding-top : 4px;
      padding-right : 4px;
      padding-left : 4px;
      padding-bottom : 0px;
    }
  </style>
  <script type="text/javascript">
    function LoadVideoBar() {
      var videoBar;
      var barContainer = document.getElementById("videoBar");

      var options = {
        largeResultSet : true,
        horizontal: true,
        thumbnailSize : GSvideoBar.THUMBNAILS_LARGE,
        autoExecuteList : {
          cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
          cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
          executeList : [ "ytfeed:most_viewed.this_week", "bud light",
                          "ytchannel:fordmodels", "vw gti" ]
        }
      }

      videoBar = new GSvideoBar(barContainer, GSvideoBar.PLAYER_ROOT_FLOATING, options);
    }
    GSearch.setOnLoadCallback(LoadVideoBar);
  </script>
</head>
<body>
    <div id="videoBar">Loading...</div>
</body>
</html>

I don't accept change; I don't deserve to live.

•

Join Date: Aug 2008

Posts: 3

Reputation: joemalaya is an unknown quantity at this point

Solved Threads: 0

joemalaya

Offline

Newbie Poster

Re: google ajax search api ( youtube videoBar)

Aug 22nd, 2008

i found out that this lines of code is very useful

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var options = {
      largeResultSet : true,
       horizontal: true,
var options = {
      largeResultSet : true,
       horizontal: true,

i changed it to

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var options = {
      largeResultSet : false,
       horizontal: true,
var options = {
      largeResultSet : false,
       horizontal: true,

now i can have 8 videos huhu..