How to Embed a QuickTime Movie in a Web Page or Blog Post

Step 1: Create the Movie Content

These instructions work with all kinds of QuickTime movie content—not just screencasts. So you can use your camcorder
to capture video, massage it in iMovie, and save it out as a QuickTime movie. Or you can create a QuickTime VR
panorama of still images. Or use your iSight or other WebCam to create a timelapse movie (http://www.peachpit.com/
articles/article.aspx?p=1014973). Or do what I did: use a little software program called IShowU (available from Shiny
White Box: http://www.shinywhitebox.com/) to record your Mac’s screen as you narrate a task.

However you start, you want to end up with a QuickTime movie sized to fit in the Web page you want to place it in. Size is
important for two reasons:

* Smaller movies generally have smaller files. That means they’ll download more quickly from your site’s server to the
people who want to see them. This is convenient for them and also reduces your bandwidth usage, which could save you
money if the movie gets popular.
* If the movie’s dimensions are wider than the space allotted for content on the Web page, the movie simply won’t fit on
the page. The result can be unattractive, to say the least.

My movie’s dimensions were 307 x 230. (That’s roughly 40% of the size I created it at: 1024 x 768.) These dimensions
are important, so be sure you know them. If you don’t know them, you can find them in the Info window for the QuickTime
movie file. Select the file in the Finder, choose File > Get info, and display the More Info area. Figure 1 shows the Info
window for my little movie.

Figure 1 The Info window for a QuickTime movie provides lots of information, including the
dimensions, duration, and file size.

And if you’re thinking that it might be a lot easier to simply upload the movie to YouTube and then embed a link to it; well,
that is an option. But if you have quality video to share, YouTube’s compression schemes are very likely to make it a
blurry mess. (YouTube is great for sharing video of your office Christmas party, but not well suited to screencasts.)

Step 2: Create the Poster Frame Movie

A poster frame movie is a QuickTime movie with only one frame in it. It’s used to offer viewers a preview of the movie so
they can decide whether they want to download and view it. With my movie weighing in at 17.8 MB (according to the Info
window shown in Figure 1), it wouldn’t be user-friendly to simply load the movie into visitors’ Web browsers. Instead, I’ll
display the poster frame with a note to click the movie to download and view it.

I use two tools to create my poster frame movie:

* QuickTime Pro. No, not the standard QuickTime Player. This is the registered version of QuickTime Player, which
enables you to save and edit movies. If you work with QuickTime movies and you haven’t invested the extra $30 to
upgrade it to QuickTime Pro, you’re missing out on a great, easy-to-use QuickTime editing tool. Go to Apple’s Web site
and get the upgrade code now. (Learn more at http://www.apple.com/quicktime/.) If you don’t want QuickTime Pro and
you use another QuickTime editing tool, you’ll have to research that program’s features for performing the tasks I cover
here.
* An image-editing program. I use Photoshop, but that’s only because I already have it. You certainly don’t need
something so feature-laden for this task. As you’ll see, all you’ll do is edit an image to include a message on it. Any
image-editing tool should do the job.

Got your tools? Okay, let’s do it.

1. Open the movie file in QuickTime Pro.

2. Use the controller’s slider at the bottom of the window to advance to the frame you want to use in your poster frame
movie (see Figure 2).

Figure 2 Advance to the frame you want to use in your poster frame movie.

3. Choose File > Export.

4. In the dialog that appears (shown in Figure 3), choose Movie to Picture from the Export pop-up menu. Then set the
name and location in which QuickTime should save the file. Click Save.
Figure 3 Use the Save exported file as dialog to save a single frame of a movie as a picture.

5. Open the picture file you just created in your image editing software (see Figure 4).

Figure 4 Here’s my poster frame image opened in Photoshop.

6. Start by increasing the image’s height by 16 pixels. In Photoshop, you’d use the Image > Canvas Size command. As
shown in Figure 5, I’ve added 16 pixels to the 230-pixel height of my image for a total of 246 pixels. With these settings,
the new blank space will be added at the bottom of the image as a black bar (see Figure 6).
NOTE

You might wonder why you need to add 16 pixels. That’s the height of the standard QuickTime controller. We want the
image to be the same size as the movie will be with the controller displayed.

Figure 5 Photoshop’s Canvas Size dialog offers one way to increase the dimensions of an image file.

Figure 6 When you’re finished, there should be a 16-pixel high black or colored bar under the image.

7. Use the image-editing program’s text tool to type some instructions in the bar. In my example, I typed click to view
movie (17.8 MB), shown in Figure 7.
Figure 7 Type some instructions for your movie.

# If necessary, flatten the movie’s layers and save it in its original file format. Close the file.

# Open the modified file with QuickTime (see Figure 8). (Dragging its icon onto the QuickTime application icon does the
trick nicely.)

Figure 8 Use QuickTime to reopen the file you created.

# Choose File > Export.

# In the dialog that appears (see Figure 9), choose Movie to QuickTime Movie from the Export pop-up menu. Then set the
name and location in which QuickTime should save the file. I usually include the word poster in the file name to
distinguish it from the original file. Click Save.
Figure 9 Use the Save exported file as dialog to save the one-frame movie as a QuickTime movie file.

Step 3: Upload the Movies to Your Server

At this point, you should have two QuickTime Movies: the original movie that you want to display on your site and the
poster frame movie that will be used as a preview for site visitors.

Use your favorite FTP software to upload the two movies to the same directory on your Web server. This might be the
same directory you use to store pictures for your site or blog, or it could be a different one. Either way, remember the URL
to the directory and the names of the files.

Step 4a: Add the Code to a Web Page

The last step is to add the embedding code to your Web page or blog entry. How you add the code depends on the type
of site you need to place it on.

Placing it on a Web page requires that you enter the following HTML code, customized for your movie, into your Web
page document. You’ll need to use an HTML editor to insert it manually.

Here’s the code:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/

qtplugin.cab"
width="n" height="n">
<param name="src" value="movieposterurl">
<param name="href" value="movieurl">
<param name="target" value="myself">
<param name="autoplay" value="true">
<param name="controller" value="false">
<param name="pluginspage"
value="http://www.apple.com/quicktime/download/">
<param name="type" value="video/quicktime">
<embed src="movieposterurl" href="movieurl" target="myself"
width="n" height="n" autoplay="true"
controller="false" border="0" pluginspage="http://www.apple.com/quicktime/download/"
type="video/quicktime"></embed>
</object>

Obviously, you need to edit this code to match your content. Replace the n variables with the width and height of the
movie, including the 16 pixel height extension. (In my example, it would be 307 and 246, respectively.) Then replace the
movieposterurl and movieurl variables with the complete URL to your poster movie and movie files.

It may seem as if you’re adding the QuickTime file twice. You are. Due to inconsistencies in browsers (such as Microsoft
Internet Explorer), it’s best to use both kinds of embedding codes. Don’t worry. The movie will appear only once.

If you use a Web-editing tool like Dreamweaver, it may have built-in tools for embedding QuickTime content. Try that first.
It may be a lot easier.

No matter how you make this change, don’t forget to upload the modified HTML file to your Web site.

Step 4b: Add the Code to a WordPress Blog Post

Although the preceding code should work in all Web documents, I can’t get it to work in WordPress, which is my blogging
platform of choice. Fortunately, there’s a plugin for WordPress that makes it extremely easy to insert QuickTime movies
with poster frame movies. It’s called QuickTime Embed and you can find it on the Channel-Ai Community Blog (http://
www.channel-ai.com/blog/plugins/quicktime-embed/).

Once the plugin has been installed and activated—Miraz Jordan and I explain how to install and activate plugins in our
book, WordPress 2: Visual QuickStart Guide—you can embed your QuickTime movie and its poster frame movie in a
WordPress blog post by entering the following code:

[qt:movieurl movieposterurl width height]

As with the code above, replace movieurl and movieposterurl with the complete URLs to your movie and its poster movie.
Replace width and height with the width and height of the poster movie, in pixels. The QuickTime Embed plugin does the
rest, creating XHTML–compliant code that works on all computer platforms with all browsers that support QuickTime
content.

When you’re finished inserting the code in your post, don’t forget to publish it to your site.

Step 5: Test

You can test the results of your efforts by viewing the page or post on which the embedded movie should appear. Figure
10 shows how it appears within a blog entry on my Maria’s Guides site (http://www.mariasguides.com/). As you can see, I
also included a link to download the large size of the QuickTime movie. This is completely optional and not necessarily
recommended. But if your bandwidth can support it, why not?
Figure 10 Here’s a clip from my blog entry with the QuickTime Movie embedded.

Click the poster frame movie to be sure the QuickTime movie loads (see Figure 11). Depending on which method you
used to insert it, you’ll either have to click the controller’s Play button or else the movie will start playing automatically.
Figure 11 Clicking the movie poster begins loading the video into the browser.

If things don’t work as shown here, go back and check the code. Pay close attention to the variables you set. Make sure
that there aren’t any typos. Save any changes you make and try again.

You Don’t Need YouTube!

As you can see, you don’t need YouTube to share videos on your Web site or blog—just a few minutes to put together the
poster frame movie and insert some code on your Web page or blog entry. I think you’ll agree that the quality of the video
is much better, and you have far more control and flexibility over preview image and movie size.