Browser Window Resize for Screen Recording

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Setting the size of the browser window when making screen recordings

When making screen recordings, I often want the finished size of the video to match typical screen sizes. This makes full screen viewing more aesthetically (I had to look that one up..) pleasing.

Also, if making videos for Google, then to record in the right proportions results in a much better looking video.

There are plenty of bookmarklets etc to resize the whole browser window - but I record just the content area, which ends up smaller than the browser size:

Typical browser resize to 640 x 480 gives the following content size:

640x480-browser

But a viewport resize to 640 x 480 gives the following content size:

640x480-viewport

The easiest solution is to install the webdeveloper add-on for Firefox..

But with a little bit of javascript code:

javascript:
var x = window.screenLeft;
var y = window.screenTop;
window.resizeTo(screen.availWidth,screen.availHeight);
var ox = screen.availWidth-(document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth);
var oy = screen.availHeight-(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);
window.resizeTo(640+ox, 480+oy);

- you can create what are called bookmarklets - just ‘drag’ these links from below, to your bookmark toolbar or a bookmark folder. Then selecting them runs the javascript and resizes your browser/window:

Google/YouTube recommend: 1280 x 720 (16:9 and HD) and 640 x 480 (4:3 SD)

640 x 480 - Browser

640 x 480 - Viewport

1280 x 720 - Browser

1280 x 720 - Viewport

800 x 600 - Browser

800 x 600 - Viewport

warmest,

Paul.

Please share this: