Home / Articles / Create a Custom YouTube Widget Using the Google Search API

Create a Custom YouTube Widget Using the Google Search API

Article Description

The widgets provided by Google are a great way to get the functionality you’re looking for without writing any code, but sometimes there’s a need for a little more control and flexibility with layout and design. Kris Hadlock explains the steps that are necessary to use the RESTful interface provided through the Google Ajax Search API in order to create a custom JavaScript Google video widget.
Rendering the results as HTML

Rendering the results as HTML

Using the results to render the widget requires an HTML file and the GoogleAPI.js file. Since the GoogleAPI object is self-contained there are no other files that need to be included, but we do need to create the div element with the gvideos id, so that the object knows where to write the HTML (Listing 3).

Listing 3: The HTML file is used as the web page where the GoogleAPI object renders the widget (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
  xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Create a Custom YouTube Widget using the Google Search API</title>
<script type="text/javascript" src="assets/js/GoogleAPI.js"></script>
<link type="text/css" rel="stylesheet" href="assets/css/googleapi.css" />
</head>
<body>
<div id="gvideo">Loading videos...</div>
</body>
</html>

You’ll also notice that I’ve included a CSS file called googleapi.css. The nice thing about creating a custom widget is that you can create your own HTML layout and use your own CSS for the design.

6. Additional Resources | Next Section Previous Section