I’d Rather Be Writing – Tom Johnson

To embed video on a web page, you don’t need to upload your video to youtube, vimeo, or some other video sharing service. A lot of times in a corporate setting, uploading your videos to a third-party site isn’t appropriate or allowed. Does this mean you have to resign yourself to a basic WMV output that opens up in the Windows Media Player? No. You can grab the embed code from Camtasia Studio’s html output and copy it to a custom page to embed your video.

When you produce your video from Camtasia Studio (or from another video editing tool), make sure you select the Embed Video into HTML option.

To embed the video on a web page, select the embed in HTML option

In the output, you’ll see an HTML file. Open the HTML file up in a text editor such as Notepad++. You’ll see two sets of object embed code. Copy the first set, which begins with <div id=”media”> and ends with </div>. It will look something like this:

Object embed code

I know there’s another section of embed code that actually says “Users looking for simple object / embed tags can copy and paste the needed tags below …” However, as of this post’s date, that code has a bug that prevents the first frame from appearing in Internet Explorer. I told Techsmith’s support about this bug, so hopefully they’ll fix it in an upcoming release.

Now that you have the embed code, do two more things. Upload your video output files to your server. They don’t need to be in the same folder as your web page at all. In fact, you can have them on another server entirely.

After you upload your video files to a server, change the paths in the code to reference the location of the files. For example, if the path to the files is http://idratherbewriting.com/wp-content/uploads/2010/01, add this path before the video file names. You have to include the URL in three places.

Changing reference paths of the video content

Now that you’ve updated the paths to reference the location of the video, just insert the object embed code into the page where you want to display it. As an example, I’ll paste my sample code below. (By the way, the 15 second video below doesn’t have any sound or show anything in particular — it’s just a sample of an embedded video.)

Now your video is embedded directly on a web page, which makes it easy to view.

Tags: Camtasia Studio, embedding, Flash, videos