WordPress and Screencast.com

ScreenCastFacePalmLarge

I had recently been working with a client whose Video Content had been uploaded to Screencast.com. Now, I had never worked with ScreenCast video content before… but, like most video “streamers”, there did not appear any real problems with working with such an organization… at least, within the WordPress construct. Unfortunately, I soon ran into a slew of strange behaviors. Behaviors that I STILL do not quite understand. But, fortunately, I was able to determine the best way of embedding “Screencast.com” video content… laying most of my troubles at rest. :) Screencast.com (sometime in November 2012) has now altered their User Interface (UI), but this is rather immaterial at this time. You’ll figure it out… and, hopefully these Screen Captures will guide you through the current process. The FIRST site that gave me an understanding on how to “embed” Screencast.com video content was: http://blogs.techsmith.com/. But, the problem arises when you desire to add additional edits (Let’s just say: Add some Text) to your Page/Post. You soon find that your Page/Post containing your Shoucast.com video look rather strange… it appears as if you’ve posted your embedded Shoutcast video TWICE (2). At first, I thought this was simply a Visual/HTML view issue. I wanted to embed the Screencast video in HTML view, especially since all of that [Object] HTML code from Screencast deemed it necessary to do so. But, even when I added my additional text (after saving the initial Page/Post) in HTML view, I STILL found the original [Object] code from Screencast would simply double in size… and when I viewed the Page/Post, I would see this:

ScreenCastIssue1

Wow! Two stacked video content containers. Weird! Oddly enough, the TOP display is “click-able” and leads to the embedded video… while the bottom photo… leads to absolutely nowhere. When I would re-edit the Post, I noticed that the “embed” code had grown “two-fold”… this was NOT acceptable. This appears to be a WordPress issue, as it appears that I’m not the only one worried about this behavior. Now, to a Final Solution Since the WordPress Theme I was working with relied a LOT on “short-codes”, it seemed appropriate that I discover a “short-code” solution to this issue. And, I found it with Screencast.com Video Embedder plugin. Now, the “Screencast.com Video Embedder” plugin does have some issues. It’s really not… complete… and, doesn’t have the “hooks” that I would expect from video plugins… such as, the FAR more polished “Viper’s Video Quicktags.” However, the Screencast.com Video Embedder plugin DOES work. To make it work, you REALLY have to know the dimensions (height & width) of the video you wish to display in your Page/Post. The Screencast Embedder does not “ask” for these dimensions. All you will see is this, when you click on its link in “Visual Mode”:

[screencast url="" width="" height=""]

So, this means that you will have to KNOW the URL, Width and Height of your embedded video before you can continue. This is easily handled with Screencast’s new UI. When you SHARE a Screencast Vido, you will now have the option to tailor your embedded video with the proper Height and Width from within Screencast. When you SHARE your video, you will see this at the bottom of the Screencast Pop-Up:

Your best bet will be to adjust the Width to fit your container… Screencast will adjust the Height in order to maintain the original video ratio… which, in the end, is a very nice feature within Screencast.com… Now, in order to work within the “Screencast.com Video Embedder” plugin framework, instead of grabbing the “Embed” code (as seen in the above TechSmith’s blog site… you watched it… didn’t you?) When you look at the Screencast site, instead of grabbing the “Embed On Your Page” code, simply look above at the “Share URL.”  This is the content you’ll need to add to the Screencast Short Code. Make sure you grab “http:……../” and everything. It should look something like below:

The Share URL is the same URL you need to insert into the “screencast url” section of the ShortCode. When you are finished, the inserted Short Code should look something like this:

[screencast url="http:www.screeencast.com/123XYZabc" width="xxx" height="yyy"]

Oh… and I did not wrap this Short Code in “[]“… if I did… then who knows WHAT video would be sitting in its place. :) Let me know if you’ve found better ways to embed Screencast.com videos. I look forward to hearing from you. :) ~Dennis

3 Comments on “WordPress and Screencast.com”

  1. Scott

    Hi and thanks

    I had the same double image issue that you had.

    I have the Embed Plus app for youtube videos which works in a similar way to the Screencast.com Video Embedder with one exception.

    With the Embed Plus app if I center the embed code then the video is centered.

    Try the same with a screencast video, even with the embedder, and the video always aligns left.

    Any ideas?

    1. Dennis Post author

      Scott,

      No specific ideas… BUT, this sounds like a CSS issue. Probably something in a DIV or SPAN element the video container is getting “wrapped” with. Perhaps your Theme is overwriting something in the plugins CSS? In order to “center align” something… you almost always have to set the CSS left & right margins to “auto;”…

      Just a guess…

  2. abbyrulez

    I had the same double image issue and found a much simpler solution, no plugin required.

    Simply go to the embed code in text mode – you will see that the last part of the code, before the closing tag is an iframe, eg.

    Simply remove this bit of code and you will be left with just one embedded screencast video. And that’s it!

    Hope this helps,
    Abby

Leave a Reply

Your email address will not be published. Required fields are marked *

XHTML: You can use these tags <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>