Last updated: Sep-06-2023
Learn how to dynamically generate videos at different sizes and aspect ratios using React with Cloudinary cropping and resizing.
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
|0:00||You can resize and crop videos on the fly with Cloudinary while also automatically focusing your videos.|
|0:20||Add the Cloudinary React package to your code and configure it with your credentials.|
|0:35||Add a Youtube version of the video and set the aspect ratio to 16:9.|
|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.|
|3:09||Set the aspect ratios to be the same and then you can compare the difference.|
Transformation BasicsLearn the basics of a transformation URL
Gravity Crops for ImagesIndicate which areas to keep when cropping
Optimize Videos in ReactOptimize 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.