Google Gadgets that play video need to ensure that large video file sizes don't overload the capacity of their web servers. Gadgets can host their video files on YouTube, but YouTube's default player is too large for most gadgets, and its controls can't be customized. This article describes how to build a custom YouTube player in Flash CS4.

The player's Flash CS4 and XML source code can be downloaded here, and the Gadget can be viewed running in iGoogle.


  1. Google Gadget Basics
  2. Playing a YouTube Video
  3. Embedding a SWF into a Gadget
  4. Placing images on Google Sites
  5. Example Code
  6. Tools

Google Gadget Basics

Google Gadgets are fragments of HTML wrapped in custom Google XML tags. You can include JavaScript in the HTML, and most gadgets are mostly JavaScript. Each gadget has a ModulePrefs tag (one of Google's custom XML tags) that includes its title, description, and author information. Another custom tag called UserPref can save a user's individual settings.

Here is a simple "Hello, World" example, that replaces the word "World" with the user's name if it has been entered into the gadget's settings dialog box:

<?xml version="1.0" encoding="UTF-8"?>
<ModulePrefs title="hello world example" />
<UserPref name="userName" display_name="Your Name" default_value="world" />
<Content type="html"><![CDATA[
    var thePrefs = new gadgets.Prefs();
    var userName = thePrefs.getBool("userName");

A user can enter their name through the settings dialog box. The link to the dialog box ("Edit Settings") is created automatically by iGoogle when it detects that a UserPref tag is present.

Playing a YouTube video

YouTube videos can be played in a Google Gadget by using the YouTube player itself. It's easy to generate the HTML to embed the standard YouTube player from any YouTube page. But if you'd like your player to have a different set of controls from YouTube's player you will need to build a custom Flash video player.

Playing a video from YouTube introduces two challenges for a custom Flash video player:

  1. The URL to a YouTube FLV changes hourly.
  2. The query string in a YouTube FLV URL confuses Flash's FLVPlayback component into thinking it points to an XML playlist rather than a video.

Here's how to work around these two issues.

Obtaining a URL to a YouTube video's FLV file

The URL to a YouTube video's underlying video file changes hourly. This is to prevent YouTube from being used as a simple file storage server. Google owns YouTube and makes the following technique available for Google Gadget developers to reliably obtain a URL to a YouTube video.

In a gadget's JavaScript, the token below can be used in place of the FLV's URL. The iGoogle container will replace the token with a valid URL at run time. The token's name is __YOUTUBE_VIDEO_URL(videoID)__, where videoID is the YouTube's ID of your uploaded video. You can see this ID in the page's URL when you play a video on

For example, here is a YouTube video page's URL and the video's corresponding ID:
Video URL:
Video ID: 3HrSN7176XI

And here is the JavaScript that uses the token and ID to set a gadget's variable to this YouTube video's URL:
var YouTubeURL = '__YOUTUBE_VIDEO_URL(3HrSN7176XI)__';

Using the FLVPlayback component with URLs containing query strings

As we have just seen, YouTube video URLs include a query string as a security mechanism. The FLVPlayback component in Flash, which is typically used to play video in a Flash application, assumes that Flash video files end in extensions such as ".flv" and do not contain query strings. URLs containing query strings are assumed to point to XML playlists. As a result, without modification the FLVPlayback component will think that a YouTube dynamic URL points to an XML playlist rather than an FLV file, and will try to parse the FLV file as XML. This will cause a Flash runtime error.

To update the FLVPlayback component to properly accept YouTube URLs as video files you must modify its source code. Download and place the latest Adobe source code for FLVPlayback into your project. When you download FLVPlayback into your project, your directory structure will typically look like this:

After downloading FLVPlayback, you will need to update the part of it that manages its network connections. Open and make the following change to the "connectToURL" function (line 665 in the file as of February 2010):

if ( name.indexOf("?") < 0 &&
if ( name.indexOf(".flv") > 0 &&

Below is an example of the new class, with this change having been made. The 2 changed lines are highlighted in yellow.

There are many other ways to update the FLVPlayback component to work with YouTube URLs, but this is one of the fastest. NCManager is changed from thinking that any URL containing a question mark is an XML file, to thinking that any URL including the ".flv" extension anywhere within it is an FLV file. Now add a dummy name-value pair to the end of the YouTube URL to include the extension. For example, the following JavaScript creates a variable for a YouTube FLV's URL, together with its dummy name-value pair so that it still ends in the ".FLV" extension:

var YouTubeURL = '__YOUTUBE_VIDEO_URL(3HrSN7176XI)__';
YouTubeURL += '&dummy=1.flv';

You must now tell the your Flash application to use this customized version of Add the following lines to your FLA's ActionScript just before you create an FLVPlayback component:

var; =;

Here is the change in my example FLA's ActionScript, highlighted in yellow. (The package name is different from the lines above as I saved the FLVPlayback component in a directory called "fl" rather than "flash".)

After making this change your Flash video player will be able to play back files from YouTube.

Embedding a SWF into a Gadget

Google provides the embedFlash() helper function to embed a Flash file into a gadget. It works similarly to SWFObject, and automatically caches your SWF on Google's servers to improve performance. It appears that previous version of iGoogle offered the embedCachedFlash() function to embed a cached copy of your SWF, but this function is no longer necessary or available as caching is now always enabled.

One thing to watch out for in the embedFlash() function is that it cannot pass parameters from the gadget's html to the SWF via the FlashVars variable. To work around this, pass them as name-value pairs on the URL to the SWF itself.

Placing images on Google Sites

Just as your gadget's videos can be served by YouTube, your gadget's images can be hosted by Google Sites, so that your web server will not need to handle your gadget's image requests. To do this, create a web page on Google Sites, and place images that you wish to use in your gadget into the page. You can use the URL to these images on your Google Site page directly in your Google Gadget as well. For example, this image comes from this web page on Google Sites.

Example Code

The Flash source code for the custom YouTube video player example can be downloaded here. Its ActionScript Code follows on page 2 of this article. The gadget built with it is viewable on iGoogle, and its source code is on page 3.


The Google Gadget Editor is a basic text editor that can upload and publish gadgets onto It's good for writing quick gadgets, and convenient for uploading written gadgets onto iGoogle for testing. It's browser-based and is a gadget itself.

The Google Developer Gadget allows you to configure which gadgets on your iGoogle page are cached. iGoogle usually caches gadgets which can be a problem when you want to view recently made changes. To keep your gadget uncached, install the "My Gadget" developer gadget and uncheck caching for gadgets you are working on. Without the developer gadget you'll have to save the gadget under a new name to work around this.