Cloudinary Blog

Automatically Crop Videos Without Losing Focus

Content-Aware Automatic Cropping for Video

Delivering videos according to the aspect ratios defined by social media for multiple devices and platforms is a growing challenge. The continuously rising volume of vertical videos and the corresponding increase in video traffic on mobile devices (now up to 57% of online videos watched) have only exacerbated the situation, with no letup in sight.

Reality is, smartphone users hold their phone vertically while scrolling or browsing online content, including videos that are not optimized for mobile devices. It simply doesn’t occur to those users to switch to horizontal mode for an enhanced view, or it doesn't feel worth their effort. This means that providers of online content must make sure their videos accommodate all viewing devices, ideally through automation.

Webinar
Delivering Compelling Video Experiences at Scale

Cloudinary, which for years has been performing automated cropping of images for size economy and compliance with aspect ratios, can now do the same for videos, adding to its already powerful video solution. Impressively, Cloudinary’s content-aware cropping capability identifies the must-keep sections by analyzing videos through advanced AI and machine-learning techniques, churning out intelligently downsized videos in any aspect ratio. It’s as simple as setting the crop mode to fill and the gravity to auto.

Ruby:
Copy to clipboard
cl_video_tag("ship", :width=>300, :gravity=>"auto", :aspect_ratio=>"1:1", :crop=>"fill")
PHP:
Copy to clipboard
cl_video_tag("ship", array("width"=>300, "gravity"=>"auto", "aspect_ratio"=>"1:1", "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryVideo("ship").video(width=300, gravity="auto", aspect_ratio="1:1", crop="fill")
Node.js:
Copy to clipboard
cloudinary.video("ship", {width: 300, gravity: "auto", aspect_ratio: "1:1", crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(300).gravity("auto").aspectRatio("1:1").crop("fill")).videoTag("ship");
JS:
Copy to clipboard
cloudinary.videoTag('ship', {width: 300, gravity: "auto", aspectRatio: "1:1", crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("ship", {width: 300, gravity: "auto", aspect_ratio: "1:1", crop: "fill"})
React:
Copy to clipboard
<Video publicId="ship" >
  <Transformation width="300" gravity="auto" aspectRatio="1:1" crop="fill" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="ship" >
  <cld-transformation width="300" gravity="auto" aspectRatio="1:1" crop="fill" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="ship" >
  <cl-transformation width="300" gravity="auto" aspect-ratio="1:1" crop="fill">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Gravity("auto").AspectRatio("1:1").Crop("fill")).BuildVideoTag("ship")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(300).gravity("auto").aspectRatio("1:1").crop("fill")).resourceType("video").generate("ship.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(300).setGravity("auto").setAspectRatio("1:1").setCrop("fill")).generate("ship.mp4")

Rotate or Move On: The Challenge with Video on Mobile

Nearly half of all smartphone users watch short-form videos or live posts at least once a week. Because most people hold their phones vertically for comfort, yet videos are best viewed horizontally, many folks shy away from the trouble of rotating their phone and waiting for the video to update. The solution? Have videos play with the correct aspect ratio, eliminating the rotation step and avoiding accidental dropping of the phone.

Additionally, given the monumental role of social media in video consumption, you must deliver videos on those platforms across all devices. The chart below showing the various aspect ratios required for optimally delivering videos for Facebook and Instagram, clearly demonstrates the challenge, especially if large quantities of videos are involved.

Introducing Automatic Content-Aware Cropping

You can now automate all your video cropping with Cloudinary’s automatic content-aware automatic cropping functionality. No more time consuming manual editing. Cloudinary has developed a complex deep-learning algorithm that analyzes frames from the video and identifies where the most interesting areas are. From this analysis, a heatmap is produced and then used to crop the video intelligently.

The cropped video will now follow the most interesting area of the video throughout the duration, ensuring that your videos retain all the important features you wanted when you filmed them, while filling the screen no matter the aspect ratio.

As we mentioned above, all you need to do is set the crop mode to fill and the gravity to auto. This will begin the process of analysing the video. We recommend performing this on upload as an eager transformation to ensure the analysis is complete before delivery (or alternatively using the explict method before delivery on a video already in your account). Once that analysis has been performed on a specific video in your account, you can deliver your content-aware video in any aspect ratio you need; Landscape, Square, Facebook Vertical, Instagram Story Vertical.

Automatic Cropping Versus Default Cropping

Let’s take a look at how content-aware automatic cropping compares with the standard center crop. Notice how the default crop only has the dog in shot for a short period of time when he passes through the center of the frame. With automatic cropping, this impressive frisbie catch stays in shot throughout the video, despite starting on one side of the frame and finishing on the other.

Click any video to see the comparison in action.

Original video
Default crop
(Center gravity)
Automatic crop

Taking it Further

We could use this new functionality to extend the existing mobile video experience and actually serve up a landscape or vertical video depending on the orientation of the device. If the user lands on your page whilst browsing in portrait orientation we can set our HTML5 video source to our vertically cropped video. If they then decide to switch to landscape then we change the source to the original landscape video. Full screen video for both orientations.

See the Pen Orientation switch demo by Cloudinary (@Cloudinary) on CodePen.


It's also super easy to combine content-aware cropping with a number of other great features of Cloudinary’s Dynamic Video Platform. Take a look at how to use automatic video transcoding and content-aware compression to achieve complete end-to-end automation and optimization.

In Summary

So there you have it, Cloudinary’s powerful video solution just got even more powerful. Advanced AI and deep learning algorithms enable you to deliver your videos in the right size and aspect ratio, for every platform or device and automate the whole process. Go ahead and try it out with one of your own videos on our demo page, or you can sign up for a free account and get going with the full product. Just remember to set the crop mode to fill and the gravity to auto. Check out our documentation for more info.


Further Reading on Video Manipulation

Recent Blog Posts

New Learning Pathways From the Cloudinary Academy

In December 2019, Cloudinary launched its customer education platform, the Cloudinary Academy, replete with courses taught by the company’s experts on developer-oriented products and digital asset management (DAM) solution. The courses comprise interactive lessons and hands-on assignments, a proven way of familiarizing the audience with the course material and illustrating it with live examples.

Read more
Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more