> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Crop and resize videos in React (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/blob/main/examples/react-advanced-video/src/App.js#L63

## Overview

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

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | You can [resize and crop videos](video_resizing_and_cropping) on the fly with Cloudinary while also automatically focusing your videos. |

### Add Cloudinary React and configure
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=20 :player=cld} | Add the Cloudinary React package to your code and configure it with your credentials.

### Add a YouTube version of the video
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=35 :player=cld} | Add a Youtube version of the video and set the aspect ratio to 16:9.|

### Add more versions and change their aspect ratios
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=05 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=34 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=09 :player=cld} | Set the aspect ratios to be the same and then you can compare the difference.|

## Keep learning

> **READING**:
>
> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Learn more about [cropping videos using automatic gravity](video_resizing_and_cropping#automatic_gravity_for_crops_g_auto).

> * Discover more transformations in the [Transformation URL API reference](transformation_reference).

#### 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 
  

 

 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.