Know Your Video Size

A proportionally-sized video, on a layer, is shown with the base layer visible along the sides.

My last project involved a collection of custom videos provided to us by the client. There’s a lot to say about video resolution but this post is about what happens when you put a video on a layer in Storyline.

At the beginning of the project, when we discussed resolution and screen size, I thought the videos would be the same size as my slide: 1024 x 576. This is a 16:9 ratio, the industry standard for video. I asked that the videos be produced at this size.

A video on its own slide in Storyline is controlled by the standard seekbar control in the player.

A video on its own slide in Storyline is controlled by the standard seekbar control in the player.

What I hadn’t anticipated was that several videos would be on layers, rather than on their own individual slides. As a result, the seekbar on the player (which controls the main slide) wasn’t able to control the videos. The client wanted independent controls for each of the videos. And rightfully so. I always like learners to have control over what they are watching or hearing.

“That’s no problem,” I thought. In Storyline with the video selected, choose Show Video Controls “Below Video”. (As of this writing, your only choices are below video and none.)

On the Video Tools Options tab, choose to show the controls below the video.

On the Video Tools Options tab, choose to show the controls below the video.

When you do this, the controls appear below the video. If the video is the same size as the slide, the controls can’t be seen… they are off the slide. They don’t appear when previewed or published.

To fix this, you can resize the video. But this isn’t ideal. It’s always best to use the media you’re given at their designed size. If you must resize the media — a video in this case — do it proportionally, by using a corner handle. Storyline automatically constrains the height-width ratio when you use a corner handle.

Drag the corner handle of the video to resize it proportionally.

If you simply make the video shorter, you’ll distort the video.

The baby on the left is 100%. The baby on the right is just a wee bit squished because the video was not resized proportionally.

The baby on the left is 100%. The baby on the right is just a wee bit squished because the video was not resized proportionally.

In our project, we made the videos smaller by proportionally reducing their size. This leaves unsightly gaps on both sides of the video, which I have accentuated here by making the background a peachy colour.

A proportionally-sized video, on a layer, is shown with the base layer visible along the sides.

Videos that don’t fit perfectly, leave unsightly gaps.

In our project, the background was white and the videos blended nicely with our minimalist player, but those gaps are unprofessional and don’t add to your credibility as a designer.

A video on its own slide in Storyline is controlled by the standard seekbar control in the player.

Click this image to view the Storyline sample.

Compare how videos are treated in this Storyline sample.

Lesson Learned

The lesson I learned here is to know how the videos will be used in the product before specifying their size requirements. Will they be on their own slides? Each on a layer? Sized to fit within some other content? Then request the videos be produced at the size required for that purpose whenever possible.

Leave a Reply

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

This site uses Akismet to reduce spam. Learn how your comment data is processed.