As a developer, you know aspect ratio plays a vital role in delivering a crisp video. Changing the aspect ratio of a video is a frequent use case you likely face when working across applications.
However, changing and maintaining video aspect ratios can be a hassle. Today, users are browsing the internet with various devices, all with differing aspect ratios. The cell phone one user might use can be entirely different from another user’s, or they may be on a tablet, desktop, or even their smart TV!
In this article, we’ll cover the basics of video aspect ratios, and we’ll also cover how you can change these on the fly, thanks to Cloudinary.
What is Video Aspect Ratio?
Video Aspect Ratio refers to the proportional relationship between the width and height of a video frame. It is expressed as a ratio of the width to the height, for example, 16:9 or 4:3. The aspect ratio affects the overall look and feel of the video, and different aspect ratios are better suited for different types of content and devices.
Cloudinary’s value proposition is centered around providing powerful image and video management solutions for developers, including tools for video manipulation and optimization. As part of this, Cloudinary offers a wide range of video aspect ratios that developers can use to create custom video experiences that meet their specific needs.
For example, Cloudinary’s video manipulation capabilities allow developers to change the aspect ratio of a video on the fly, which can be particularly useful for mobile devices, social media platforms, and other applications where different aspect ratios may be required. Additionally, Cloudinary’s AI-powered video optimization features can automatically detect the optimal aspect ratio for a given video and deliver it in the most efficient format possible, ensuring the best possible user experience.
Standard Aspect Ratio
There are various types of devices, each with its own screen size and aspect ratio. Videos are usually recorded in 4:3, 16:9, or 21:9 aspect ratios. These numbers don’t necessarily represent the number of pixels; they only represent the width and height ratio.
Closely related to aspect ratio is a concept called resolution. Resolution is the number of pixels contained by the video aspect ratio. The greater the resolution, the better the quality of the video.
Changing Video Aspect Ratio
When you change the video aspect ratio, essentially, you are altering its height and width. You’ll need to decide what happens with the empty space of the video, as it can be a noticeable difference when scaling up. This also applies when you shrink the aspect ratio – you’ll need to deal with a zoomed-in video, or you’ll need to add borders to make up for the negative space.
Changing Video Aspect Ratio with Cloudinary
Now that we know what video aspect ratios are let’s discuss how to change them. If you have an application that stores and streams videos, it’ll need a way to change the aspect ratio dynamically. Otherwise, your users will be upset if they can’t watch videos with the correct device aspect ratio.
When it comes to delivering the best aspect ratio for your video, Cloudinary is a platform that can help. Cloudinary is an end-to-end media platform allowing users to upload videos and provide them in the desired aspect ratios.
To use Cloudinary, you will need to create a free Cloudinary account. To follow along, you’ll also need to upload a sample video to Cloudinary. For this tutorial, we have already uploaded a video named: ‘sample_smmplc.’
Cropping To Fit Screen Size
Let’s say we have an uploaded video but need it to work on multiple devices. The solution here is to crop the video sides to make it fit, sacrificing some of the video in some cases. With Cloudinary, you can achieve this easily by running the code below:
this.videoCrop = cld.video("sample_smmplc")
.resize(fillPad().height(400).aspectRatio("9:16"));
Blurring Sides
If the video is smaller than the device screen, the user will see empty spaces on the sides. Normally this isn’t ideal, but we can blur those empty spaces with Cloudinary by using this snippet:
this.videoBlur = cld.video("sample_smmplc").resize(
pad()
.width(480)
.height(320)
.background(blurred().intensity(400).brightness(15))
);
You can also control the blurred areas’ intensity and brightness, as shown within the `.background` object.
Adding Color to the Background
Another option over blurring the sides is adding color to the empty space’s background. Check out this snippet:
this.videoBgColor = cld.video("sample_smmplc")
.resize(limitPad()
.width(400)
.height(150)
.background(color("green"))
);
Of course, you can adapt all the parameters in the code above to your needs and preferences. Not everyone likes green!
Resize the Video to Fit the Container
Cloudinary supports resizing the video while maintaining the aspect ratio. Here’s what it looks like with Cloudinary:
this.videoResize = cld.video("sample_smmplc")
.resize(scale().width(100).aspectRatio("1:2"));
In this snippet, we fixed the video with a width of 100 pixels and then resized it to maintain an aspect ratio of 1:2.
Closing the Book on Video Aspect Ratios
Video aspect ratios can be annoying but critical to your user experience. Without maintaining proper aspect ratios, your users will definitely be upset when trying to consume videos, whether it’s their videos or yours.
If you’re in need of a tool that can help transform and optimize your digital media, Cloudinary is the platform for you. Not only do we help with transforming video aspect ratios, but our Programmable Media API can apply all sorts of transformations and effects to your digital media.
You can check out the Cloudinary Documentation to see all the options and functionalities available for manipulating aspect ratios. And make sure to try it out (it’s free forever!) and unleash the full potential of your digital media.
More from Cloudinary:
