How to Embed Video on a Web Page
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.
Thank you for posting this valuable informatiom. I plan to post a link to this on Twitter to call more attention to this article so others can benefit.
Thanks for the step by step guide on how to add a video on my website without uploading the video on other site, this steps really helped me and my fellow bloggers as well.
Thanks for this.
Is it possible to embed video into the comments at blogspot?
Not sure about blogspot. With WordPress, yes.
Wow, this is terrific! Was stumped on how to get Camtasia vids into my own page designs. Really appreciate your helping me figure it out.
Thanks so much!!!
Rob
Glad it was helpful.
Hi Tom …
One strange thing I noticed … when placing the video in my web page, everything below the video disappeared from the web page. In Firefox, I fixed this by placing the video inside a one-cell table, but its still an issue in Internet Explorer.
Here is an example:
http://www.magicalmultimediatour.com/callin/ac.html
This page actually is quite long, but everything below the video disappears.
Would love your feedback. Perhaps I messed up on one of the steps.
Rob
My guess is that you’ve got an extra div tag in there or something. Try copying the other embed code to see if that fixes things.
I tried this complete newbie it just showed the following message
The Camtasia Studio video content presented here requires a more recent version of the Adobe Flash Player. If you are you using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by downloading here.
Any ideas please?
helpful, thanks