How to Display Smaller Videos and Leverage the Full Size Viewing Option
Let's say you've got a blog, website or maybe a wiki that supports embedded video. Dilemma: If you embed the video at full size, it'll take up your whole site. Or worse, it overflows your site like shown here. Yet if you record a small video, people will have a hard time seeing anything useful. Plus you might often want consistency such that all your videos are the same size initially.
In this post I'm going to show you how you can record full screen (or whatever size you want) and then present your video at a more reduced size. Viewers have the option of watching the video as is, or they can click the full screen button to enjoy your original dimensions. 
I listed the steps below, but I also made a Jing video (2:30) where I show my process.
- In Jing, make a new button that returns Screencast.com embed code. That's explained in detail here.
- Next, make one of your stellar Jing videos. You can make it as large as you want.
- When you're done with the video, click Stop and click your Screencast.com embed code button.
- Now, paste the embed code into your blog, webpage, wiki, etc. Preview it. Is the video ginormus? We can fix that.
- This next part gets a little into some math, but it's not bad. Get a piece of scratch paper and write down the height of your video over the width. You can see where to find the dimensions in this example.
- Now, the key here is scaling the video but keeping the same aspect ratio. If you just lop off some arbitrary number of pixels from height and width it's possible your video will look cropped or squashed. You can reduce the height and width by multiplying the same percentage or, if you want to bust out some old school math dust off your cross multiplication skills. What's great about cross multiplication is that you can precisely define your desired width and the height will fall into place for you. Remember, once you get your new dimensions you must update the height in 4 locations in the code as well as the width.
- That's it! Your video will be gracefully embedded at your specified dimensions and viewers have the luxury of viewing the original dimensions if they want!
Parting notes:
- This works for SWF and MPEG-4 video format. (Free and Pro versions). Recommended: Use Jing to upload your video and return the code. There is currently an issue where SWF videos put on Screencast.com manually may not scale appropriately. We believe we have a fix poised to be implemented.
- If I know I'm making a video I care about, I will usually hold Shift as I make the selection and then snap to 1280x720. I don't have to do any math because I just reduce each dimension by half and arrive at the popular and friendly size of 640x360. You can learn more about that on Brooks' YouTube in HD How-to video.
- Yeah, I probably should have made my example more extreme in that I recorded awfully close to 1280x720.
Let us know if this was helpful and understandable. Thanks!
Subscribe to RSS feed
This is good, but I have the same problem, oddly, just playing the video in the screencast.com site. I don't want the video to play in my wiki site, but want users to go to screencast.com to see the video of how to edit the wiki. But because the video is so large, only a portion of the video appears in the screencast.com page when it plays. (See http://www.screencast.com/t/OWMzMzc5OT ) I can't figure out what to do to make the entire screen appear; I've tried changing the size of the browser, and several other things, all to no avail. Thanks for any advice.
Hi, I'm guessing the problem might be related to the first bullet under the parting notes section.
Are you by chance making SWF videos? (It’s the only option on the free version of Jing.) And then are you perhaps uploading the SWF videos manually to Screencast.com. (As opposed to using the Screencast.com button in Jing?) There’s a bug right now if you upload manually where Screencast.com doesn’t realize it’s a special Jing SWF and it may lead to a “zoomed” or cropped effect.
Try this. Open your Jing History. Then find the video. Double click the thumbnail. It will open in the Preview window. Now click the Share to Screencast.com button with is the left-most one.
See if you get a good result.
Also I should mention that we’re quite confident that we’ve fixed this issue and will implement the solution soon.
Great tutorial. Thank you.
Is there a PAUSE hotkey for Jing? Like in Camtasia?
Also, is there a hotkey to toggle between camera mode and screen recording mode - it is shame to use the mouse to do this - in my humble opinion.
When is the next release of Jing coming out?
Thanks
Tony
Hi Tony,
Yes, you can pause Jing when it's recording. On Windows, press the F8 key. On Mac, you press whatever hotkey combination used to initiate the capture. The default is Command + Shift + 1.
Sorry about the camera toggle. There is no hotkey for that yet. Jing needs more hotkeys though. I think the team agrees.
Next release? Right around the corner, scheduled for December 8th. We've announced Jing to Twitter direct for both Free and Pro versions. http://blog.jingproject.com/2009/11/jing-me-tweet-me-jing-direct-t.html
Be sure to let us know what you think! We hope to have more news next week.
Hi
I have made a test tutorial and loaded it on my site. I have seen your tutorial on enlarging it, and that worked fine. However it is not clear for the site users how to get rid of the fullscreen when the video is finished. I pressed escape but others might not know what to do.
Also, when the video is finishes you are left with the black jing info screen. It would be nice if it reset to the beginning so that it fits in with the look of my blog. I realise this might be an advanced feature, but I cannot upgrade as this is a student project.
Another issue is, that I have tried various converters to convert the .swf to another format (mp4), but although I get audio, I do not get video.
Many thanks for any help.
Sarah
Hello Sarah,
Good point about the key. I wonder if others would share if they have been confused by this or know of others who have ran into this.
Converting SWF is very difficult. SWF isn't really a true video format so there are very few things out there that know how to convert it. I've tried with no success using a few apps Jing users have recommended to me.
Since TechSmith makes both Jing and Camtasia Studio, we know how to covert the SWF in Camtasia Studio (Windows). If you're in a pinch CS is fully functional during the 30-day trial.
Thanks for the comment Sarah!
Mike Curtis, TechSmith
Thanks for the reply. I might try the 30 day trial.
In the meantime please can you tell me if there is anyway of having the video reset to the beginning? The black screen does not look right on my site when the video is finished!
Hello Sarah,
I checked to see if there is a way to get Jing back to the beginning. For the free version of Jing, the answer is no. If you have Jing Pro, you can add a Flash variable (flashvar) to the embed code that will prohibit the "replay" screen from appearing. It's not exactly like what I think you are asking for--the ability to jump back to the beginning, and there is no variable for this.
However, if you concluded your videos with a certain image or slide, I think it would stop and "freeze" on the last frame. I did some testing with one of my videos.
The flashvar is called: showendscreen=false
It's not especially hard, but more a matter of being precise and making sure the variables are in the right place. I think a good article that gets into the concept of flashvars is here: http://www.screencast.com/help/tutorial.aspx?id=309
I learned something about Jing today! I made a quick 1 minute Jing showing how it's done. http://screencast.com/t/MGJjMDY0N
I understand what you are doing here, and I've been able to apply the principles to my own site. However, I am unable to jump to fullscreen mode now. Is there some code to toggle that on/off?
Hello Paul,
The first thing that comes to mind is maybe somehow something with the full screen variable got messed up? We put that in there by default, so it *should* work, but double check you have the code I've highlighted in blue here: http://screencast.com/t/ZWM2MDliMj
If you have trouble, I can take a look at your code and see if I can replicate or fix the issue. m.curtis@techsmith.com
Good luck,
Mike Curtis
When I used Jing previously and embedded the videos into my site (not using screencast.com) the video would crop / zoom in if scaled down. Has this now been fixed? Thanks.
Hello Andrew,
You can achieve what you wish with some work. The trick is that we use SWF as a video format because it's web-friendly, royalty free and works with Mac and PC. One bad thing is that SWF isn't a typical video format so messing with it often causes issues.
I don't like coming off as a sales person, but truthfully, the easiest thing to do is get Jing Pro so you can have the MP4 video format that works in various editors and acts like a well-behaved video format.
However, you can make the SWF work. You need some extra pieces on your FTP server to pull it off right. Please visit Brooks' blog (he made the Jing player) where he gets pretty technical, but has good information: http://www.brooksandrus.com/blog/2009/01/19/jing-pro-ftp-a-complete-solution/
I hope it helps!
Mike Curtis, TechSmith
thank you!!!!!!!! Exactly what i needed!
I've created a screencast using Jing Free and have exported the SWF to my own web server.
But I'm getting the zoomed/clipped bug after scaling the OBJECT and EMBED tags with WIDTH and HEIGHT attributes/params.
What am I missing?