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.
Delving Into the Problem
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:
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 (Kinda)
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=""]
Know Thy URL
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:
Adjust to Fit
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