CldVideoPlayer Transformations

Adding Video Transformations

CldVideoPlayer takes advantage of the native transformation option that is available to the native Cloudinary Video Player. To use this, we can use the same transformation prop with CldVideoPlayer.

For instance, if we wanted to crop and resize a video to a square, we could use:

<CldVideoPlayer
  width="500"
  height="500"
  src={`${process.env.VIDEOS_DIRECTORY}/dog-running-snow`}
  transformation={{
    width: 500,
    height: 500,
    crop: 'fill',
    gravity: 'auto'
  }}
/>

This will apply a width and height of 500 as a transformation. It will set a crop mode of fill to make sure the entire video frame is filled. We finally use gravity of auto to make sure the subject of the video is tracked and not lost in frame.

Depending on the transformation, you may need to wait for the video to process if applying the transformations on-the-fly. To help avoid wait times, you could [eagerly load transformations](https://cloudinary.com/documentation/transformations_on_upload#eager_transformations) on upload.

If you instead wanted to add a watermark to the video, you could use overlays in the transformation:

<CldVideoPlayer
  width="1620"
  height="1080"
  src={`${process.env.VIDEOS_DIRECTORY}/mountain-stars`}
  transformation={{
    overlay: `${process.env.ASSETS_DIRECTORY}:space-jelly-cosmo-helmet`,
    width: 150,
    gravity: "south_east",
    x: 50,
    y: 50,
    opacity: 80
  }}
/>

When you play the video, you’ll notice the Space Jelly logo on the bottom right of the video!

For more information and examples of using the transformation prop, check out the Cloudinary Video Player documentation.