Crop and resize videos in React (video tutorial)
Last updated: Sep-12-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
You can resize and crop videos on the fly with Cloudinary while also automatically focusing your videos. |
Add Cloudinary React and configure
Add the Cloudinary React package to your code and configure it with your credentials. |
Add a YouTube version of the video
Add a Youtube version of the video and set the aspect ratio to 16:9. |
Add more versions and change their aspect ratios
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
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
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...
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.
✖️