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.