Adobe Robohelp

Get new posts delivered straight to your inbox.

Subscriber count: 3,220

Adobe Robohelp

How to Embed Video on a Web Page

Jan 16, 2010 • general, screencasting

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
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 references paths of the video content
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.


Get new posts delivered straight to your inbox.

Subscriber count: 3,220

About Tom Johnson

Tom Johnson

I'm a technical writer based in the California San Francisco Bay area. Topics I write about on this blog include technical writing, authoring and publishing tools, API documentation, tech comm trends, visual communication, technical writing career advice, information architecture and findability, developer documentation, and more. If you're a professional or aspiring technical writer, be sure to subscribe to email updates using the form above. You can learn more about me here.