click to play button
click to replay button
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.