Using AI-Based Video Cropping for Multiple Aspect Ratios Across Platforms

Making videos these days is a lot more complicated than just recording something cool. You also have to make sure your video looks good everywhere your audience will be able to watch it, whether that’s on a big desktop screen or scrolling through a vertical mobile app. Every platform has its own aspect ratio, and trying to squeeze your video across platforms is a real challenge.

Cloudinary makes video optimization easier with AI-based smart cropping, so the important parts of your video stays in view, no matter the format. In this post, we’ll walk through what this means, how it works, and how you can use it in your own projects.

Cropping in Cloudinary relies heavily on a concept called “gravity.” This is what tells Cloudinary where to focus when it crops a video.

There are several gravity values available for use:

• g_center. This is the default. It focuses on the middle of your video frame.
• Directional gravities. These let you specify a general area, like g_north (for the top), g_south (for the bottom), g_east (for the right), g_west (for the left), or even combinations like g_north_east (for the top-right).
• g_xy_center. This centers the crop based on both the x and y axes.
• g_auto. This is where the real AI power comes in. With g_auto, Cloudinary’s artificial intelligence automatically identifies and focuses on the most important region of the video. It considers multiple factors, such as the location of faces, the edges of objects, the amount of detail in a particular area (entropy), and even motion, to pinpoint the best possible crop.

Among all these choices, g_auto is definitely the smartest and most practical for video. It’s designed to ensure your content always looks great, no matter the final dimensions.

To truly see g_auto in action, let’s take a look at a demo video from Cloudinary’s public demo cloud. It features a surfer, and it’s a perfect illustration because g_auto does an incredible job of keeping the surfer perfectly in view, even as the video is cropped for a different aspect ratio.

Here’s the original video:

We’ll compare the video when it is just cropped without smart cropping (g_auto) and when we introduce smart cropping.

From the videos above, notice how g_auto intelligently crops the video on the right, always keeping the main subject (the Surfer) in focus, as opposed to the video on the left that uses g_center (this is the default when no gravity parameter is passed as mentioned earlier) and cuts off the Surfer at some point in the video. This is really powerful and very helpful for users or even developers who need to deliver the same video across various platforms with different aspect ratios.

Aside from the g_auto property, there are two major properties that play a crucial role in delivering a cropped video for a specified aspect ratio: c_fill and aspect ratio (e.g., ’ar_1:1`).

c_fill is the crop mode property. It tells Cloudinary to resize the video so it completely fills the specified width and height. If the original video’s aspect ratio is different, c_fill will crop parts of the video to make it fit rather than leaving empty spaces.

Aspect ratio is the proportional relationship between a video frame’s width and its height. To have a better understanding of video aspect ratio or suggestions on best social media aspect ratios, see Cloudinary’s video Aspect Ratio Documentation.

Here’s the smart cropped video URL from above. Feel free to tweak the properties to get a better feel for how everything works!

https://res.cloudinary.com/videoapi-demo/video/upload/ar_1:2,c_fill,g_auto,w_192/v1/samples/surfer_crop_rm6b19
Code language: JavaScript (javascript)

You can also implement this programmatically using Cloudinary’s official SDK. We will go through the setup and implement a simple, smart video cropping solution with React.

npm install @cloudinary/react @cloudinary/url-gen
Code language: CSS (css)

import { Cloudinary } from "@cloudinary/url-gen";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { AdvancedVideo } from "@cloudinary/react";

const cld = new Cloudinary({
  cloud: {
    cloudName: "demo", // Replace with your cloud name
  },
});

const myVideo = cld
  .video("sample") // Replace with your video public ID
  .resize(
    fill()
      .width(320)
      .aspectRatio('9:16')
      .gravity(autoGravity())
  );

export default function App() {
  return <AdvancedVideo cldVid={myVideo} controls />;
}
Code language: JavaScript (javascript)

This creates a 9:16 smart-cropped video with React. You can change the width and the aspect ratio to target any other aspect ratio. Also, you can extend this example to include more robust implementations.

You don’t have to be a developer to use Cloudinary’s smart cropping. You can actually do it right from the Media Library by following these simple steps:

• First, upload your video to Cloudinary.
• Then, head over to your Cloudinary Media Library and open up the video you want to edit.
• Hover your mouse over the video thumbnail, and click More.
• From the menu, select Advanced Editing.
• A special editing console will pop up, showing your video and various adjustable properties.
• Now, just tweak those properties, and you’ll see the changes happen on your video in real time.

Video Smart Cropping intelligently reframes your videos; it detects the most important visual elements and automatically adjusts the crop to keep those elements right in focus. This is valuable when you need to deliver the same video across different aspect ratios without losing the original message or impact.

By automating this entire process, Cloudinary saves both developers and content teams a massive amount of time they would otherwise spend on tedious manual editing. It guarantees that your videos will always look visually engaging, no matter what device or platform they’re viewed on. This enhances the viewing experience and drastically speeds up how quickly you can publish your visual media.

With users consuming video on dozens of different screen sizes and platforms, having your content look right everywhere matters. Cloudinary’s AI-powered cropping makes this easy. Whether you’re a developer working in React or a content creator using the UI, smart cropping helps keep the focus where it should be.

You can learn more in Cloudinary’s official smart crop for video guide.