embed-video-on-webpage
X
00:00
/
00:00
CC
The easiest way to embed your Camtasia
Studio videos on your own webpage or blog, is
to use another service to host your video.
Like Screencast.com or YouTube, and grab the
embed code from there to paste into your own
HTML webpage.
Camtasia Studio 7 makes this process really
simple, as you can upload your videos directly
to both of these services
right from within Camtasia.
Once uploaded, in this case I'm using
Screencast.com, click the share tab and copy
the embed code to your clipboard.
Navigate to your personal webpage and open
it in your HTML editor program that you use.
In this example I'll just use Notepad.
Scroll down until you find the location within the
body of your webpage where you want to
embed your video.
Paste the embed code between the open and
closed div tags.
Be sure to save this document to update the
changes.
And then open your webpage to see your
embedded video that can be viewed right here
on the page.
Now if you prefer to host your video yourself on
your own web server
and not rely on another service to host it for
you, that's fine, too. It just takes a few more
steps.
Let's walk through that process now.
The first step you'll need to do is produce your
video into the Flash format.
For this example I'm going to choose custom
production settings,
and Flash as the output.
I'll use ExpressShow, and the MP4 file format.
Note that you can also use the FLV or SWF file
formats, but MP4 is the format that I'll be using
for this tutorial.
On the video options page, check this box next
to Embed video into HTML
since we'll be using some of the code that is
created in this produced HTML file.
Once the video is produced, open the
production folder to locate the files that were
created.
I'm going to copy all of these files to my
clipboard,
and then paste them in the same folder where
my personal webpage is located.
Be sure to paste these files at the same level
as your webpage and not in a separate folder,
so that your webpage can easily find and
reference these files.
Now right-click on the HTML file that was
produced with your ExpressShow and choose
open with...
Notepad or any other application that allows
you to view HTML files, for example
Dreamweaver.
I'll stick with Notepad though for this example.
Scroll near the end of this HTML file and find a
line of text that says,
"Users looking for simple object embed tags
can copy and paste the needed tags below."
So select all of the code from the beginning of
this div tag until it closes...here.
Right-click and copy the selected code to your
clipboard.
Then go find your webpage where you want to
embed this video onto.
Right-click the webpage and choose open with
either Notepad or whatever application you use
for editing your webpage.
Scroll down until you find the location within the
body of your webpage where you want to
embed your video.
I'd like to embed this video right under this text
on the page.
Since I included the open and close div tags in
the code that I copied earlier,
I'll highlight these tags and paste the embed
code.
Be sure to save this document to update this
new embed code.
And then open up your webpage to see your
embedded video on the page.
One final tip.
Be sure to upload all of these files in this local
folder to your web server so that everything is
live on the web.
Hope this helps, and thanks for watching.