Last updated: Dec-11-2024
On this page:
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
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
Related topics
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
- Learn more about cropping videos using automatic gravity.
- Discover more transformations in the Transformation URL API reference.
If you like this, you might also like...
Transformation Basics
Learn the basics of a transformation URLGravity Crops for Images
Indicate which areas to keep when croppingOptimize Videos in React
Optimize delivery of videos in a React app
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.
✖️