Put YouTube Videos on Your Web Page

Embed a strip of YouTube videos on your on your web page and let your users watch the video channels you've selected without leaving your site. Customize how the video bar should be displayed, and this wizard will write the code for you.

Customize it

Orientation:
vertical
horizontal
   
Popular Channels:
Most Viewed Videos
Top Rated Videos
Recently Featured Videos
YouTube Channels:
Note: You can either specify a single channel (e.g., lonelygirl15) or a comma separated list of channels
Search Expressions:
Note: You can specify a single search expression (e.g., hamster dance) or a comma separated list of expressions

Add code to your site

 
Copy and paste the following where you want your video bar to appear. Do not place it within the <head> ... </head> section of your page unless you plan on relocating the <div id="videoBar-bar"></div> element out of this chunk of 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 : !,
        horizontal : ,
        autoExecuteList : {
          cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
          cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
          executeList : 
        }
      }

    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++ -->
                

More about the Video Bar

If you're curious about what else you can do with the Video Bar, check out the GSvideoBar documentation. With a little more programming, you can change the player size, number of results, thumbnail size, and more.

Getting Help

If you have questions or problems, please check out our AJAX Search API discussion group to see if anyone has had the same problem you're wrestling with. The Google AJAX Search API team also participates in the group and answers questions.