Having spent several hours trawling through Google searching for the answer, I eventually worked out how to display Camtasia Studio movies in WordPress blogs, using the excellent Kimili Flash Embed plugin. Since I’ll probably forget how by the next time I need to embed a Camtasia movie, I thought it would be useful to write it all down in the form of this tutorial.
I am a recent convert to Camtasia, and although it’s not cheap, it’s excellent value for money if you need to create screencasts, and video tutorials. However, displaying the resulting movie on a WordPress site is not so straightforward. Essentially, there are two choices:
- Easy option: Upload your finished movie to Youtube, or equivalent.
- Trickier option: Self-host the movie, ie upload the movie to your server, and work out how to embed the movie in a Post or Page. But fear not! This is exactly what we will be covering in this tutorial.
Easy option: use Youtube
Produce your Camtasia Studio video using Camtasia’s built-in Production Wizard, choose the Youtube preset (tweak as necessary), render the movie, then upload your movie to Youtube. All you need to do now is grab the embed code from your movie’s page on Youtube, and paste it directly into your Post in the Post Editor. Easy.
Trickier option: self-host the movie
Use Kimili Flash Embed Plugin for WordPress
Download, install and activate the Kimili Flash Embed plugin for WordPress. This is the tool which will handle the embedding of the movie in your Post or Page.
Produce your Camtasia movie
Open up your Camtasia Project file and use the Production Wizard to select the Flash option. Follow the various dialogue screens, select the various options you need, and render your movie. Once this is done you will have a collection of files which have been created during the rendering process:
- mymovie_controller.swf
- mymovie.mp4
- mymovie.html (if you selected this option)
- expressInstall.swf
- ProductionInfo.xml
- FirstFrame.png
- swfobject.js
In fact, we only need 3 of these:
- mymovie_controller.swf – the Flash player which will display the movie
- mymovie.mp4 – the actual movie
- FirstFrame.png – an image to show when the movie isn’t playing
Upload the movie files to your server
Upload these three files to a new folder in your wp-content/uploads/ directory, or anywhere else on your server, for that matter, making sure that all three files reside in the same folder.
Make a note of the path to this folder. For demonstration purposes, let’s assume that these files now reside in the myvideo folder here:
http://www.mydomain.com/wp-content/uploads/myvideo/
Add the movie to a Post using Kimili Flash Embed
Go back into WordPress and write a Post. You will notice that Kimili has added a button to the Post Editor toolbar. Click this button to launch the Kimili Flash Embed options popup box.
Configuring the Kimili options popup
Click the “More” button in the Kimili options popup so that you see all the options, and enter the information as follows:
- Flash (.swf): Enter the absolute URL to the SWF file, in our example:
http://www.mydomain.com/wp-content/uploads/myvideo/myvideo_controller.swf
- Dimensions: Enter the width and height of the movie. Watch out! The Camtasia Express flash player adds an extra 18px to the original movie’s height. Therefore, if you recorded the Camtasia capture at 600 x 400, the .swf file is now 600 x 418, which will be the dimensions to enter here. (Tip: If the quality of the movie looks bad after it has been embedded in your site, check this height setting.)
- base: Enter the full URL to the folder which contains the three files mentioned earlier. And don’t forget the slash at the end of the URL! For example:
http://www.mydomain.com/wp-content/uploads/myvideo/
This base parameter is very important and ensures that Flash can find the FirstFrame.png and mymovie.mp4 files which are used by mymovie.swf.
- fvars: This is where you enter the flashvars parameters. Depending on your Camtasia Production settings, these flashvars can vary from movie to movie. The easiest way to find these is to open up the mymovie.html file mentioned earlier (which we don’t need to upload – it’s just a useful source of info) and look for a piece of code like this:
Rather unhelpfully, because Kimili Flash Embed uses javascript behind the scenes to do the embedding, we need to enter this flashvars information using a syntax understood by javascript. So, this flashvars code in the html, mentioned above:
…needs to be entered like this in the Kimili options popup:
autostart=false;thumb=FirstFrame.png;thumbscale=45;color=0x1A1A1A,0x1A1A1A
As you can see, the essential difference is that we have only used the code within the value=”…” statement, and replaced the ampersand separator with a semi-colon.
- Other settings: Frankly, you can leave these alone – unless you especially need to set specific parameters – as all of these parameters are given defaults by the Kimili plugin, defined in the plugin’s Settings page.
Generate the Kimili code and Publish the Post
Click the Generate button. The Kimili options popup will disappear and you should now see code, something like this, in the Post Editor (HTML view):
[kml_flashembed publishmethod="static" fversion="8.0.0" movie="http://www.mydomain.com/wp-content/uploads/myvideo/myvideo_controller.swf" width="600" height="418" targetclass="flashmovie" loop="false" quality="best" allowfullscreen="true" fvars="autostart=false;thumb=FirstFrame.png;thumbscale=45;color=0x1A1A1A,0x1A1A1A" base="http://www.mydomain.com/wp-content/uploads/myvideo/"]
[/kml_flashembed]
Double check that the URLs in this code are correct. If so, Publish the Post, and your movie should now appear on your site.
Troubleshooting
If, after all this, your movie doesn’t appear in your Post, the most likely culprits are:
- Incorrect URL to the …_controller.swf file (Use absolute URLS, including the http://)
- Incorrect or missing base parameter. If you want the FirstFrame.png to show, you must specify a base parameter in the Kimili options popup, and use an absolute URL including the trailing slash.
- Check that you have actually uploaded, to your server, the three files mentioned earlier.
- Finally, it is possible that Kimili conflicts with another plugin. To eliminate this, deactivate other plugins to find the culprit.
And finally…
Hopefully, this tutorial has been useful.
If and when I get the time, I shall write a follow-up tutorial on displaying Camtasia movies in a lightbox, using the Shadowbox Plugin.
Happy embedding! 🙂
Very Interesting, i did a lot of searches but didn´t find anything besides your article.
Sad but true that one have to follow such tricky ways to embed a simple flash movie…
I hope for later releases.
Just a note to anyone still having issues with this.
I wanted my videos to be compatible on all devices and ended up finding JW Player. It’s basically a script that serves Flash or HTML5. They’ve released a WP plugin too, which seems to work.
Only downside is commercial sites need a license, but for $99 it solves many headaches until HTML5 becomes more widely supported…
@ Daniel,
Thanks for the comment.
I’m hoping that WP 2.9 will address this as part of the big “Media” enhancements that are being talked about – but don’t hold your breath. 🙂
In the meantime, Kimili is just about the best way to do it.
Hi! nice tutorial. But mine didnt work… it only show a white box and when right click it says “movie not loaded” is it because the width and the height dont match? because everything else is done correctly…
Thank you, i really need you help!
Hugo,
It sounds to me that either the “base” setting in Kimili options isn’t correct, or you haven’t converted the fvars into the javascript format as described above. If it’s any consolation, it took me about half a dozen attempts before I got it right, the first time!
Good luck. 🙂
Been looking for about 45 minutes now and you just solved it on the second try following your directions. Thanks so much for taking the time to write this out!
You’re welcome! Thanks for the feedback. 🙂
Excellent article, thanks for taking the time to write it. Helped me get my first .swf up and running after several hours of frustration! Tom
Great! Glad it was useful. 🙂
I was wondering if you knew of a way to include a ‘Full Screen’ button, allowing users to view the video at full screen?
Simon,
It may be possible but, frankly, I haven’t found out how to do it yet. Probably the best way to do it is to launch the video in a lightbox, eg Shadowbox. This will be the subject of a future article. 🙂
This is an exceptional tutorial. Thanks so much for the easy to follow instructions!
Thanks, Dan. Glad you found it useful. 🙂
Hi
i did it, end it worked!
but only in my homepage
how do i make it run in all the site pages?
here is my site
http://s318300369.onlinehome.us/qualitech/
thenx
Priya
I just discovered a very important point for troubleshooting this.. make sure your web server is configured to properly serve out an MP4 file. On some servers, you’ll have to add the proper MIME type definition to the config file. After battling with this thing for the last 2 hours, that was the issue that was keeping the video from playing.
mp4 video/mp4
Thank you so much for putting together this fantastic article. Total life saver!
-nathan
Nathan,
Glad you found it useful. 🙂
Thanks for posting your tip, too.
Hi there,
unfortunately the way described above is nice. But unstable plugins and fast versioning of wordpress made it necessary for me to look for a more convenient way to publish my screencasts on my blog
I tried it for some movies, but soon switched to screencast.com, cause of the following:
– i want my movies to be published in a corporate way
– fullscreen support
– toc (Table of content support)
-direct embedding in blogposts via share link
-direct embedding via html code (no iframe, no linking to seperate html page necessary)
The free account is enough for me right now.
To see a screencast published with custom layout on screencast.com look here:
http://www.medienkindheit.de/tutorials/tutorial-rss-feeds-erklaert-am-beispiel-des-feedreader/
Regards, Daniel
Daniel,
Yes, alternative methods such as screencast.com can be easier. 🙂
Great tutorial and I’ve just got it running. What I would like to do though is have it autostart as the page is loaded. Any ideas?
Steve,
Did you see the autostart=false example in the “Configuring the Kimili options popup” section above? Changing this to autostart=true should work.
Thank you, Thank you, Thank you! I was about to lose my mind. I almost went to Amazon S3 as recommended on the Camtasia forum but i really had no idea what that was or how it worked and i wanted to keep my videos on my site
Great! Glad you found it useful. 🙂
Still suffering with cemtesia and its plugin my video’s are not coming on to the front end pleae help me ASAP.
Hello ,
Thanks, helped me get my first .swf up and running after several days of frustration.
I have a question ,
I cant place the flashmovie in the center of the page. I tried to use firebug, and placed the flash code between div tags , and it worked fine.
How can i find the file in which the flash code resides?
Haim
Add your div tags in the Post Editor, then place the movie in the div tags. Much easier than trying to edit plugin files.
although thtis obviously works it’s hard to believe knoone has develpoped a better plugin for this process.
Gavin
Just followed your article and got my Camtasia screencast playing nicely in WordPress 😉
Thank you!
Stefano
Ade,
Simply awesome. I got it up and running in about 4 minutes. You have like the only solution out there. I wish your article could rank for a few other terms I tried first. The one which ultimately got me here was:
embed camtasia html file in wordpress
I’ll be sure to tweet this page and Google + it.
Thanks a bunch.
John,
Thanks for the comment and glad you found the article useful. 🙂
Re Google: “wordpress camtasia” results in my article listed #3 on the first page… Of course, these things are never completely static, so who knows… 🙂
For some reason I cannot get Camtasia 7 to generate the firstframe.png
I can get my video to play by uploading the swf file into my media library but the controls won’t display. Any ideas on how to fix these issues?
Sorry, no. Your best bet is to contact Camtasia support.
Great stuff – many thanks!
Thanks for the useful tutorial.
It didn’t work for me as described, however adding:
src=myMovie.mp4;to the fvars parameter showed the video.. but no thumbnail image…
If I changed the:
thumb=myMovie_First_Frame.png;to
poster=myMovie_First_Frame.png;All worked great.. just in case it helps anyone else.. 🙂
Thanks, Zeke.
The article is quite old now and hasn’t been updated for the latest version of Camtasia. This is on my evergrowing “to do” list… 🙂
Zeke! I was on the verge of giving up when I saw your little addition. Worked a treat, thanks so much!
Seems like this stuff doesn’t work anymore in camtasia 8.0. It did work on 7.0…
Hi,
See my reply to Zeke, above. Thanks.
hey will you please help to find out Fvars.?
I didnt get it from my html file
Hi,
This article is quite out of date and I don’t have the latest version of Camtasia. If you wish to hire me to fix your issue you can do so by sending me an email. (See my Services page.)