Embedding Camtasia SWF Videos In WordPress
Written by Zain on October 1st, 2007{ 23 comments }
Okay, here’s another tip.
For those of you who’ve struggled with getting Camtasia SWF files into your WordPress pages, stop searching. You’ve found the right page.
Let me just say, I’ve struggled with it and spent several hours trying to figure this out a couple of days ago, so with any luck this will help you save *a lot* of time (as well as hassle with trying to use various plugins like Kimili Flash Embed to do the job!).
Things you will need:
- HeadSpace2 from UrbanGiraffe.com
- Sniplets from UrbanGiraffe.com (although a similar effect can be achieved using Adsense Deluxe or anything else that allows you to put bits of code into your pages. I’d still recommend Sniplets though!).
Installation:
- Create your swishy Camtasia video presentation and make it nice. I’m using Camtasia 4, not sure if the code for other versions is different or not.
- Produce it as an SWF file and output it.
- Upload it to a directory of your choice on your server.
- Make a note of the path and directory to the files (very important!)
WordPress Admin (assumes you’ve installed the HeadSpace and Sniplet’s plugin):
- Go to Manage / Sniplets (or whatever else you’re using to embed this)
- Add a new sniplet and give it a name.
- In your favourite HTML editor, open up the *.html file that was created when the files were produced.
- Copy and the code from the <body id=”cs_flashBody” > to the closing </body> tag.
Note 1:
Things to look out for here are the first line that says new SWFObject – usually there is no path here to /video/. I’ve added this to the first argument of the function to look like this:
var fo = new SWFObject( "/video/NLPWorld-CaseStudy_controller.swf", "NLPWorld-CaseStudy_controller.swf", "640", "447", "7", "#FFFFFF", false, "best" );
The csConfigFile also need to have the /video/ path added as does the csPreloader.
e.g.
fo.addVariable( "csConfigFile", "/video/NLPWorld-CaseStudy_config.xml" );
fo.addVariable( "csPreloader" , "/video/NLPWorld-CaseStudy_preload.swf" );
Note 2:
Usually the id=”cs_flashBody” attribute is contained in a <body> tag. You will need to change this to a <div> tag instead so that you don’t mess up your page.
Writing The Page/Post
- Go to Write Page/Post
- Add the Sniplet name (usually something like No sniplet called the-name-you-put-in-when-you-added-the-code ).
- With HeadSpace installed, scroll down and use the “Advanced” features and
- Add the-path-to-your-SWF-files/swfobject.js (this is one of the uploaded files)
- Add the-path-to-your-SWF-files/whatever-the-production-was-called.js (this is one of the uploaded files too!)
Final Touch
- You will need to open the Config XML file and make 1 amend. In this case it is called “NLPWorld-CaseStudy_config.xml” (see above). You can either do this before you upload or using your favourite HTML editor (personally, I use the editor so I actually edit this live on the site).
- In the file, look for a tag with your production file name in it. In this case I had to find <uri>NLPWorld-CaseStudy.swf</uri>
- Add the path to the file in front of the file name so it looks like this:
<uri>/video/NLPWorld-CaseStudy.swf</uri> - Save the file.
Go back to your site and publish the Post/Page and view it. It should now work.
…Unless something went wrong.
And you didn’t do something right like put the right file paths in.
Or made a typo.
Trust me – it’s easy to do. I did it (and I’m not ashamed to admit it), but I forgot to put a forward slash / in front of the Config path – it makes all of the difference between it working and not working!
If you want to see this in action, I finally managed to do it with the Semi-Static WordPress Homepage Case Study video I mentioned in my earlier post. It should now work for Mac’s as it’s a SWF file and not a WMV (which I originally had it as):
Lovely isn’t it? Camtasia in a WP Blog… if only someone would build a plugin that would do this… looks like it might be another job for me and John. It’s going on the to-do list.
I hope this is useful and helps people out a bit.
Enjoy!
October 9th, 2007 at 8:24 am
Thanks for this write up it saved me struggling.
Managed to avoid headspace2 (which conflicted with semiologic version of wordpress) by adding the two javascript includes into the sniplet.
The other problem I had was with the visual editor putting p tags around the sniplet swapped them to pre tags
All the best
Rob
October 9th, 2007 at 8:42 am
Using just the Sniplets to embed the Javascript code for Camtasia – now *that’s* a really cool idea Rob. A very well thought out solution!
I suppose it’s just the techno-geek in me that likes to see the javascript calls in between the head tag! Although, I have to admit, your version will work – so thanks for the suggestion. I’m sure other people using the Semiologic Pro version of WordPress will appreciate your solution too.
Semiologic is a great product although both John and I had a few issues with it because Denis de Bernardy (the Developer of Semiologic Pro) has coded it in such a way that it makes it really tricky to add other plugins to the system.
If you’re interested, FAQ-Tastic should be Semiologic compatible – John is a wizard when it comes to building plugins for WordPress and found a way around the plugin issue. I’ll mention to him that HeadSpace might have a few issues and I’m sure he’ll get round to making it compatible with Semiologic at some point (if he ever gets the time in between the stuff I get him to do!)
.
I know what you mean about the p tags in the visual editor though – those darn automatically generated p tags do get in the way sometimes. Again, your method of getting around them with the pre tags is an excellent tip – thanks for sharing it!
Cheers,
Zain
October 18th, 2007 at 9:01 am
Thanks Zain… Just updated to camtasia 5. You now have the option to produce a single swf with embedded controller. Much simpler to add to a blog I can just cut and paste the code from the html adjusting paths if need be.
Not keen on the smart-focus option might be good if I had time to work it out. Getting the size right for the recorder is now much easier too.
Thanks for the comments and the help in the first place.
November 25th, 2007 at 7:02 pm
Hey Zain,
Thanks for the tip! your site came up #1 when I searched for wordpress camtasia.
I think a Video would be great.
BTW, Techsmith is offering a free version of Camtasia 3. check out my blog for the links.
cheers,
Chris
December 6th, 2007 at 4:23 pm
February 28th, 2008 at 5:33 pm
Help!!!
I’ve been trying to embed a CS 5 Express Show vid into my blog post/s using Sniplets, but to no avail…
I have got the files hosted with Amazon’s S3 data services rather than live on my server, but I have put the paths into the code and it works when I build a generic vanilla html page & open it in my browser, but in WP, all I see is the sniplet file name [blah blah blah] showing in the post.
NO idea where I’m going wrong, but would REALLY appreciate anyone’s help.
Happy to email the code I am using along with screen shots of inside my WP post editor if it would help.
Thanks in advance to anyone who can help.
Eran Malloch
bloggingtrafficsecrets.com (this is the site I am trialling this on – you can contact me via my personal site which is attached to my name.
PS: Thanks again to anyone who can help. TechSmith are not having much luck with this one at the moment.
May 13th, 2008 at 3:48 pm
Any way to embed flash in blogs hosted at wp.
August 5th, 2008 at 8:34 pm
I am following the Rich Jerk video WordPress and this video is stopping after few minutes of running.
Is it possible to explain what is the prfoblem ?
August 10th, 2008 at 5:00 pm
Great information! Thanks for writing this. It is an honor to participate in the discussion.
October 21st, 2008 at 8:53 pm
[...] I’ve downloaded about 5 plugins and none of them work. The closest thing I’ve found is this … WordPress | Camtasia | SWF | Embed KnowledgeConstructs.com However, my camtasia html file is completely different than what’s in their example. So I cannot [...]
December 16th, 2008 at 12:10 am
Followed the tutorial quite close, but I seem to be having issues with the video.
It displays, loads, then I get the video and the controller load but the width cut almost in half.
I’ve searched and searched, but I have yet to find an explanation or a solution.
January 4th, 2009 at 6:26 am
Great info here. Thanks a lot.
March 25th, 2009 at 4:37 am
Snap! Looks like I might have arrived too late. Even though this was initially posted almost 2 years ago it looks like theres no plugin created and when I tried to get to HeadSpace2 from UrbanGiraffe.com the site was down?
Do you have any updated info on how to do this pretty please?
October 22nd, 2009 at 8:29 pm
Course work also includes an extensive community mapping project that allows students to gain an intimate working knowledge of the community in which they will work. ,
May 28th, 2010 at 9:32 am
Very helpful tips. I had no idea of that at all.
February 10th, 2011 at 4:05 pm
Hey there, I just thought you’d like to know that your blog’s layout is all messed up in Avant (browser) for some reason. You might want to check out your HTML code. -Philip
November 21st, 2011 at 4:08 pm
There are a lot of variables when inserting video in a website. The easiest way (imho) is to choose “Produce and Share” then “Share to YouTube” and Camtasia (version 7) will upload it to your YT account. Then, simply use the “embed video” link on YouTube for your new video and paste it in to your website page.
January 4th, 2012 at 8:03 pm
Jasa SEO Murah…
[...]WordPress | Camtasia | SWF | Embed · « KnowledgeConstructs.com[...]…
January 27th, 2012 at 6:40 pm
DLEWORDPRESS is Free Download Web Skin Sharing website…
[...]WordPress | Camtasia | SWF | Embed · « KnowledgeConstructs.com[...]…
February 2nd, 2012 at 5:00 pm
#1 page for such a programs is for me FreePlatinumDownloads….
[...]WordPress | Camtasia | SWF | Embed · « KnowledgeConstructs.com[...]…
March 8th, 2012 at 3:02 pm
adaptacja…
[...]WordPress | Camtasia | SWF | Embed · « KnowledgeConstructs.com[...]…
April 9th, 2013 at 9:15 am
Spot on with this write-up, I really believe this
web site needs much more attention. I’ll probably be back again to read through more, thanks for the information!
April 24th, 2013 at 6:06 am
Appreciate several other helpful website. Where more may possibly I am getting that will style of details coded in this type of perfect way? I own a venture that we’re basically currently taking care of, and I’ve also been on the glimpse out there intended for such information.