“How To” Embed A Camtasia Video in Zen Cart - Walk Through

**ardhill** · 13 May 2011, 08:17 AM

I got very frustrated at Camtasia, as the method of embedding the finished video in a web page is a bit messy in my opinion. I expected better from them. It was especially frustrating after I had use BB Flashback, which is much easier to embed in a web page.

Then we have the problem of embedding in Zen Cart. It is more exaggerated than a simple HTML page, as you need to add code into the <head> </head> section of the page, and link to Javascript. It can be done in Zencart, but it is not straightforward – at least not as much as it should be in my opinion for a leading (and expensive) screen recording programme.

I have had a number of emails back and forth with Techsmith trying to help me with this, and still couldn't get it to work properly.

Eventually... I found a pretty simple way of adding the videos to my Zen Cart pages, so I want to share the method with you:

1. Make your screencast, I will call it My-Screecast for this walkthrough

2. Then, produce your Camtasia screencast in Flash format (MP4/FLV/SWF) This is the most readable format for the majority of computers and mobile devices. This will output a number of files. Like to put them in a folder of their own such as:

[FONT="System"]My Documents/Camtasia Studio/My-Screencast-Folder/[/FONT]
(This folder is going to be uploaded to your web server, so I don't have any spaces in the files or folder names)

Into it goes the output files from Camtasia e.g.

[FONT="System"]expressInstall.swf
FirstFrame.png
swfobjects.js
My-Screencast.html
My-Screencast.mp4
My-Screencast.swf[/FONT]

3. Assuming that you have checked your screencast by running the html file locally, and it is working OK, then you can customise the html file slightly by changing the background colour to the colour of your Zen Cart page. Assuming your page is White, then open up the html file in an editor and change the following:

[FONT="Fixedsys"]background-color: #1a1a1a;[/FONT]
(This is line 25 in my html file)

change the hex colour to one that suits your page e.g. white.

[FONT="Fixedsys"]background-color: #FFFFFF;[/FONT]

There is a border above the video in the default html file, you don't need it, so remove it:

[FONT="Fixedsys"]margin-top: 40px;[/FONT]
(Line 31 in my file)

Change the 40px to 0px e.g.

[FONT="Fixedsys"]margin-top: 0px;[/FONT]

Now save the file.

4. Next, upload the folder and files to your server. I like to add them to a 'media' folder e.g.

[DOMAIN ROOT] [FONT="System"]/media/My-Screencast-Folder/[/FONT]

5. We are going to place the screencast video into your page using an iframe. You need this code:

Code:

<iframe src="http://www.My-ZenCArt-Domain.com/media/My-Screencast-Folder/My-Screencast.html" name="My-Screencast" scrolling="auto" frameborder="no" align="center" height = "450px" width = "530px"> </iframe>

Change the following attributes to suit your purposes:

[FONT="Fixedsys"]http://www.My-ZenCArt-Domain.com
My-Screencast-Folder/
My-Screencast.html"
name="My-Screencast"
height = "450px"
width = "530px">[/FONT]

You get the height and width setting by seeing what size your screencast is, then adding a bit to both the height and width figures.

I like to leave the “scrolling” setting on auto, this means if my height and width settings are too small, I will have scroll bars showing.

Make the height and with figures as small as you can get away with, but just big enough, so the scroll bars aren't showing, though you won't be able to see the scrollbars until you paste this code into your zen cart page and view it in your browser.

6.So, once you have change the iframe code to suit your purposes, copy and past it into your zen cart page that you want the video to show.

7.OK, now view the page live, and you should have your screencast video on your page. Adjust the height and width settings as mentioned above so you both fit your page, and aren't showing any scroll bars. If it's just too big for your page, go back to Camtasia, and make the output file screen size smaller.

That's it!

I hope this is of some help.

Paul

[I wrote this walk through in May 2011 using Techsmith Camtasia Studio 7, Zen Cart v1.3.9d]

Other Software I used: FileZilla (ftp software) & Notepad++ (text editing software)

Other Screencast software I mentioned that I had previously used: Blueberry software - BB FlashBack

**misty** · 13 May 2011, 08:48 AM

Thanks for sharing.

Thread: “How To” Embed A Camtasia Video in Zen Cart - Walk Through

Thread Tools

Search Thread

Display

“How To” Embed A Camtasia Video in Zen Cart - Walk Through

Re: “How To” Embed A Camtasia Video in Zen Cart - Walk Through

Similar Threads

Embed Video

Ho do I embed a Camtasia video?

Embed YouTube Video?

how to sell downloadable products through zen-cart?

Here's My Product Type Walk through

Posting Permissions