Crop and resize videos in React (video tutorial)

Overview

Learn how to dynamically generate videos at different sizes and aspect ratios using React with Cloudinary cropping and resizing.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Resize and crop videos with Cloudinary

0:00	You can resize and crop videos on the fly with Cloudinary while also automatically focusing your videos.

Add Cloudinary React and configure

0:20	Add the Cloudinary React package to your code and configure it with your credentials.

Add a YouTube version of the video

0:35	Add a Youtube version of the video and set the aspect ratio to 16:9.

Add more versions and change their aspect ratios

1:05	Add more versions of the video and change their aspect ratios to see the difference. Use the fill mode instead of scaling the video.

Use automatic gravity and focus on the face

1:34	Add the autoGravity and autoFocus parameters to use the AI capabilities of Cloudinary and focus on the face in the video.

Compare the different versions side-by-side

3:09	Set the aspect ratios to be the same and then you can compare the difference.

Keep learning

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.