Improving Videos with Zooming

How many talks have you been to where someone in the back shouts “can you make the font bigger?” The presenter struggles with their screen – makes a few nits larger “is that ok?” and there is a bit of back and forth.  Sometimes the balance of the screen is thrown completely out of whack i but now the content is visible to the folks in the room, who are there to learn.

The same problem exists on web-only talks, except there is no person in the back to complain.  How can we ensure that the content we are producing at home will be readable for our users on different devices and screens?  It is a tough problem, and should be thought out when recording a virtual talk.  Sometimes – there is a desire to show a lot of different views at once – making it hard to have everything legible at the same time.

As an example, I created a talk where I am doing entirely too much on my screen, and even *I* cannot read all the words (you can see me squint as I type in the url.) And I’m sitting right in front of my laptop!

 

Making the talk more readable

Ok, so I just took all this time to create a talk, and presented it in my living room.  On watching the recording – I realise that no one can read what the heck the three screens on my laptop say, ruining the whole point of trying to teach a group of people.  Luckily, I have uploaded this video into Cloudinary, so we can crop and enlarge areas of the video in order to make it more legible. In this case, there are three regions I would like to focus on: the terminal (yellow), the browser (pink) and the text editor (green):

 

Terminal

Let’s use an image to do some cropping. If I crop a box 400×200 starting at x=125 and y=0, I get a url that looks like this:

https://res.cloudinary.com/dougsillars/video/upload/ 
c_crop,x_125,y_0,w_400,h_200/w_720/cloudinary_zoom_master_vesane.jpg

The url parameters tell Cloudinary to crop the image at (125,0) to make a 400×200 image – and then stretching it to 720 pixels wide.

The resulting image is a pretty good crop of the terminal window on my Mac:

Simply changing the extension to .mp4 converts the crop into a full length video of my talk – focused just on the terminal:

HTML & Browser

Repeating the same process for the HTML text editor and the browser:

 

I now have 4 videos – the original video I recorded with OBS on my computer, and the three closeups of the windows on my screen.  What could we do with this?

Potential uses

That important text field that no one could read – now in post production, you can re-edit the video to show that screen, and then revert back to the full video afterward.

But there are other fun possibilities: using clickable areas in the video – you could enlarge regions of the original video for 10-15 seconds with JavaScript – letting viewers “zoom in” of different parts of the video, and zoom back out.

Or – if just one window is more important – perhaps play that main video and the zoomed video simultaneously on the same page – allowing users to see exactly what they need.  Since the videos have the same source – they will be synced automatically!  Now, your online talk can continue – and everyone will be able to read the content in each window on the screen – without the attendee in the back asking you to make the font size larger.