Programmable Media

Crop and resize videos in React (video tutorial)

Last updated: Sep-12-2024

Overview

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

Video tutorial


View the code
You can find the code from this tutorial in GitHub.

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

Jump to this spot in the video  0:00 You can resize and crop videos on the fly with Cloudinary while also automatically focusing your videos.

Add Cloudinary React and configure

Jump to this spot in the video  0:20 Add the Cloudinary React package to your code and configure it with your credentials.

Add a YouTube version of the video

Jump to this spot in 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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  3:09 Set the aspect ratios to be the same and then you can compare the difference.

Keep learning

Related topics

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

Transformation Basics
Learn the basics of a transformation URL
Gravity Crops for Images
Indicate which areas to keep when cropping
Optimize Videos in React
Optimize delivery of videos in a React app

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

Rate this page: