“How we used to post screencasts at Digital Media Cookbook” – So, we need to give this post a new title. Something like “How to post screencasts using Screencast.com”. We are beginning to change over how we implement screencasts here at DMC. We’ll be using the Vimeo Hosting service. I think we’ll be doing an updated screencast and recipe soon.

How we post screencasts at Digital Media Cookbook from umwnewmedia on Vimeo.

Ingredients

1 – A Computer with Internet access.

1 – An account at Screencast.com.

1 – We use the Aspect Ratio Calculator site to scale the screencast video to a smaller size.

1 – A place to publish the HTML code from Screencast.com. We use a site on a WordPress multiuser installation.

Directions

1. This process assumes that you have created a screencast in Jing, which is a free program to create screencasts. I use the Pro version of Jing to get an MPEG4 version, which I later upload to Blip.tv for the iPhone version.
2. After the screencast has been completed, you have the option to save your video to several places, one of them being Screencast.com. Clicking on the Screencast.com button starts the upload process within the Jing program. It will notify you when your video has finished uploading.
3. Once your video is uploaded you can navigate to Screencast.com, login and find your video. If you used Jing, it will be in a Jing folder (you can also use Camtasia Studio with Screencast.com)
4. Click on the Jing folder and find the thumbnail icon for your screencast. Click on the Share button next to the thumbnail icon.
5. In the Share Content window, look for the Embed on your page: area and click in the field with the “embed code”. Copy this, by selecting Edit>Copy from your browser menu, or by using the keyboard shortcut Ctrl-c (PC) or Command-c (Mac).
6. Now we create a new post in our WordPress blog. In the HTML editor (don’t use the Visual Editor to paste the code) we paste the code by choosing Edit>Paste from your browser menu, or by pressing CTRL-c or Command-c
7. Next, we need to make some modifications to the code to fit it in the blog post. Depending on what size video you recorded, you will probably need to scale the video down in size to fit it in the blog post. There may be some trial and error here but you need to find the right pixel dimensions for the video. In our example we have a 1280×720 video. We scale it to 560×315. Different WordPress blogs have different spaces for posts. Starting with a 450 pixel wide setting should be good and you can adjust later.
8. Depending on the aspect ratio of your video, the size that you scale your video to may vary. Let’s say we start with 1280×720, and we want to scale to a width of 450 pixels. Use the Aspect Ratio Calculator site to determine what the ratio should be. If the width needs to be 450 then the height needs to be 253 to maintain the 16:9 ratio.
9. Now you need to change all of the occurrences of the 1280 width to 450 (there will be 3 of them), and all of the 720 height to 253. UPDATE – HTML5 code has no been added to the embed code for the screencasts. Whereas there used to be 4 places to update the dimensions, there are now 3.
10. Make sure to give your post a title and then publish the page. You should now be able to view the page and watch the screencast from within the blog.