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.

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!