Last updated: Apr-08-2023
After uploading videos to Cloudinary, they can be transformed in many ways.
The syntax for transforming and delivering videos is generally similar to that for images, and you can apply the majority of available image transformations to video as well. For example, you can resize, crop, rotate, set video quality and format or use auto quality and/or auto format, add text or image overlays to your videos, and more.
There are also a number of special options you can use for transforming and delivering video content. For example, you can adjust their speed, duration, sound, and appearance. There are also some features that are specific to audio.
This section introduces you to the basics of video transformations using the
For complete details on all video transformation functionality, see Video transformations and the Transformation URL API reference.
If you haven't yet installed the React SDK, you might want to jump to the quick start first.
See also: React image transformations
Video transformation functionality
In addition to transformation features that are equally relevant for images and video, such as resizing, cropping, rotating, adding text or image overlays, and setting video quality or format, there are a variety of special transformations you can use for video. For example, you can:
- Transcode videos from one format to another
- Apply video effects such as fade-in/out, accelerating or decelerating, adjusting volume, playing in reverse
- Play video-in-video, trim videos, or concatenate multiple videos
- Set video and audio quality options such as bitrate, video codec, audio sampling frequency, or audio codec
- Adjust the visual tone of your video with 3D LUTs
- Generate thumbnails or animated images from video
- Deliver your video using adaptive bitrate streaming in HLS or MPEG-DASH
You can optionally specify all of the above transformations to videos using methods that generate image tags or via direct URL-building directives.
Video transformations with React
To transform a video asset, use the
@cloudinary/url-gen package to create the transformation, then pass the transformed video object to the
cldVid attribute in your
AdvancedVideo component to render the video on your site. For example:
In the above example, the walking_talking video is cropped to a 150 x 150 pixel video with rounded corners, focusing on the faces, resulting in this video element:
@cloudinary/url-gen package installs an additional transformation-builder-sdk library as a dependency, which handles the transformation generation part of the URL.
You can use the Transformation Builder reference to find all available transformations, syntax and examples.
AdvancedVideo component accepts the following properties:
The cldVid property
cldVid property accepts a
The cldPoster property
cldPoster property accepts a
CloudinaryImage object, or a
CloudinaryVideo transformed to an image format.
This takes the center frame of the video as the poster:
You can also set
"auto" to select the best frame of the video to use as the poster (
so_auto), and apply automatic quality (
q_auto) to the image:
HTML video attributes
AdvancedVideo component accepts the following properties, which result in standard HTML
|AdvancedVideo property||HTML video attribute|
For example, this video would play inline, with controls, loop and start with the specified poster image:
posterproperty if both are specified.
HTML media events
AdvancedVideo component accepts the following properties, which result in standard HTML media event attributes:
|AdvancedVideo event||HTML media event|
For example, this video would call the
playFunction function when played and the
endFunction function when it ends:
You can lazy load your videos, in the same way as you can for images, using the lazyload plugin.
For example, this video would only load when it comes into the viewport, then play automatically:
You can optionally specify sources in the
sources property, such as:
For example, this video would have a choice of two sources:
It results in the following
Direct URL building
You can build a video URL by:
- Configuring your Cloudinary instance.
- Instantiating a
CloudinaryVideoobject for the video you want to deliver, using
- Calling the
toURL()method of the
CloudinaryVideoclass to return the delivery URL:
The resulting URL,
Specifying a version of your video to deliver
You can specify a particular version of your video to deliver by using the
setVersion method. The version is added to the delivery URL as explained in Asset versions.
For example, to specify version
1510668637 of the elephants video from the example above:
The resulting URL is now:
Transforming your video
Videos are transformed by adding serialized transformation instructions to the video delivery URL. For example, to scale your video to a width of 400 pixels, add
@cloudinary/url-gen package, you transform a video by performing one or more transformation actions on the
CloudinaryVideo object (see the syntax overview). Remember to import the actions that you are using:
The resulting URL is:
Code explorer: React video transformations
Videos.jsx imports all the functions and uses
AdvancedVideo components to display the transformed videos on a simple web page.
This code is also available in GitHub.
Video transformation examples
This section provides examples of using the
@cloudinary/url-gen package to apply some of the video transformation features mentioned in the previous section.
The following example resizes the
elephants video to 20% of its original size and rotates it by 20 degrees. It also adds a semi-transparent cloudinary logo in the bottom right corner, using a southeast gravity with adjusted x and y coordinates to reach the corner of the rotated video.
The resulting URL is:
The following example adjusts the brightness of a skiing video, and sets its radius to max in order to give a telescope-like effect. It then appends a copy of the video in reverse, and then plays forward again, but in slow motion.
The resulting URL is: