Responsive design and art direction generally requires displaying videos at a variety of sizes, often much smaller than the original.
If you deliver full size videos and rely on browser-side resizing (using CSS or HTML width and height attributes), users are forced to download unnecessarily large files. Therefore, videos should always be delivered from the server at their final size.
When you use any of the Cloudinary resizing transformations , the sizing (scaling/cropping) is performed on the server side, and the asset is always delivered to the browser at the requested size.
Here are some examples of different cropping or resizing techniques used on the same video:
Auto-crop with focus on facesc_fill,g_auto:faces
Pad with blurred backgroundc_pad,b_blurred:400:15
Keep the right halfc_crop,x_0.5
You can set the target dimensions of your resized video by specifying width, height, and/or the target aspect ratio as qualifiers of your resize transformation.
Using an integer value for w (width) or h (height) sets the new dimension to that number in pixels. For example, w_150
sets the width to exactly 150 pixels.
Using a decimal value for width or height sets the new dimension relative to the original dimension. For example, w_0.5
sets the width to half the original width.
Using ih
or iw
as values sets the dimension to the initial height or initial width of the original video respectively. For example, w_iw
sets the width to the same value as the original width of the video. This may be useful when applying chained transformations or setting the dimensions of an overlay .
Aspect ratios are specified using the ar (aspect ratio) parameter, as follows:
a:b
where a
signifies the relative width and b
the relative height (e.g., ar_4:3
or ar_16:9
).
a decimal value representing the ratio of the width divided by the height (e.g., ar_1.33
or ar_2.5
). 1.0 is a perfect square.
In most cases, you will specify both width and height or width/height along with an aspect ratio to define the exact required dimensions. However, in rare cases, you may choose to specify only one of these 3 resize qualifiers, and Cloudinary will automatically determine the missing dimension as follows:
If you provide only width or only height , then the other dimension is automatically calculated to deliver the original aspect ratio. For example, if your original asset is 400*600, then specifying c_crop,w_200
is the same as specifying c_crop,w_200,h_300
. Supported for all resize and crop modes.
If you provide only the aspect ratio : If ar
> 1, the original width is maintained and the height is cropped to deliver the requested ratio. If ar
< 1, the original height is maintained, and the width is cropped accordingly. Supported for cropping modes only.
If you want to resize only one dimension, and keep the other dimension at its original size (rather than the automatic determination described above), you can specify only width or only height, and add the
fl_ignore_aspect_ratio flag qualifier.
When changing the dimensions of an uploaded video by setting the video's height, width, and/or aspect ratio, you need to decide how to resize or crop the video to fit into the requested size. Use the c (crop/resize) parameter for selecting the crop/resize mode. Cloudinary supports the following video resize/crop modes:
Crop/resize mode
Behavior
Cropping modes
If the requested dimensions have a different aspect ratio than the original, these modes crop out part of the video.
fill
Resizes the video to fill the specified dimensions without distortion. The video may be cropped as a result.
fill_pad
Same as fill
, but avoids excessive cropping by adding padding when needed. Supported only with automatic cropping .
crop
Extracts a region of the specified dimensions from the original video without first resizing it.
Resize modes
These modes adjust the size of the delivered video without cropping out any elements of the original video.
scale
Resizes the video to the specified dimensions without necessarily retaining the original aspect ratio.
fit
Resizes the video to fit inside the bounding box specified by the dimensions, maintaining the aspect ratio.
limit
Same as fit
, but only scales down the video.
pad
Resizes the video to fit inside the bounding box specified by the dimensions, maintaining the aspect ratio, and applies padding if the resized video does not fill the whole area.
lpad
Same as pad
, but only scales down the video.
When creating dynamic delivery URLs, if you specify only the width and/or height parameters, but no cropping mode (no
c_<mode>
), the video is
scaled to the new dimensions by default. However, there is no default cropping mode when using the Cloudinary SDK helper methods (see
Embedding videos in web pages ), so a cropping mode must be explicitly set.
Some of the cropping modes keep only a certain part of the original video in the resulting video. By default, the center of the video is kept in the crop, but this is not always ideal. To keep the parts of the video that are important to you, you can use the gravity parameter. For example, you can specify to keep faces, or gravitate towards an automatically-determined area of interest. You can also guide the crop towards areas of your video defined by compass points, for example, north
to keep the top part of the video, or south_east
to keep the bottom-right part.
The following examples show the same video resized to a width and height of 200 pixels, using different methods of resizing and cropping.
The original video is 224 x 400 pixels:
Resizing the video to 200 x 200 pixels, using crop , scale , fill and pad results in the following videos:
c_crop,h_200,w_200
c_scale,h_200,w_200
c_fill,h_200,w_200
b_black,c_pad,h_200,w_200
You could deliver the c_crop
transformation shown above as follows:
Ruby (cloudinary 1.x):
cl_video_tag(" docs/cld_rubiks_guy " , :height =>200 , :width =>200 , :crop =>" crop " )
PHP (cloudinary_php 2.x):
(new VideoTag (' docs/cld_rubiks_guy.mp4 ' ))
->resize(Resize ::crop()->width(200 )
->height(200 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" docs/cld_rubiks_guy " , array (" height " =>200 , " width " =>200 , " crop " =>" crop " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" docs/cld_rubiks_guy " ).video(height=200 , width=200 , crop=" crop " )
Node.js (cloudinary 1.x):
cloudinary.video(" docs/cld_rubiks_guy " , {height : 200 , width : 200 , crop : " crop " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(200 ).width(200 ).crop(" crop " )).videoTag(" docs/cld_rubiks_guy " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" docs/cld_rubiks_guy.mp4 " ).resize(
crop().width(200 ).height(200 )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' docs/cld_rubiks_guy ' , {height : 200 , width : 200 , crop : " crop " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" docs/cld_rubiks_guy " , {height : 200 , width : 200 , crop : " crop " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" docs/cld_rubiks_guy.mp4 " ).resize(
crop().width(200 ).height(200 )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" docs/cld_rubiks_guy " >
<Transformation height =" 200 " width =" 200 " crop =" crop " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" docs/cld_rubiks_guy " >
<cld-transformation height =" 200 " width =" 200 " crop =" crop " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" docs/cld_rubiks_guy.mp4 " ).resize(
crop().width(200 ).height(200 )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" docs/cld_rubiks_guy " >
<cl-transformation height=" 200 " width=" 200 " crop=" crop " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(200 ).Width(200 ).Crop(" crop " )).BuildVideoTag(" docs/cld_rubiks_guy " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setHeight(200 ).setWidth(200 ).setCrop(" crop " )).generate(" docs/cld_rubiks_guy.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(200 ).width(200 ).crop(" crop " )).resourceType(" video " ).generate(" docs/cld_rubiks_guy.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" docs/cld_rubiks_guy.mp4 " )
resize(Resize.crop() { width(200 )
height(200 ) })
}.generate()
The following sections explain how each of the crop modes behave.
The fill
cropping mode creates a video with the exact specified dimensions, without distorting the video. This option first scales up or down as much as needed to at least fill both of the specified dimensions. If the requested aspect ratio is different than the original, cropping will occur on the dimension that exceeds the requested size after scaling. You can specify which part of the original video you want to keep if cropping occurs, using the gravity parameter (set to center
by default).
Fill a 250-pixel square with the Rubik's cube video:
Ruby (cloudinary 1.x):
cl_video_tag(" cld_rubiks_guy " , :height =>250 , :width =>250 , :crop =>" fill " )
PHP (cloudinary_php 2.x):
(new VideoTag (' cld_rubiks_guy.mp4 ' ))
->resize(Resize ::fill()->width(250 )
->height(250 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" cld_rubiks_guy " , array (" height " =>250 , " width " =>250 , " crop " =>" fill " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" cld_rubiks_guy " ).video(height=250 , width=250 , crop=" fill " )
Node.js (cloudinary 1.x):
cloudinary.video(" cld_rubiks_guy " , {height : 250 , width : 250 , crop : " fill " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(250 ).width(250 ).crop(" fill " )).videoTag(" cld_rubiks_guy " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" cld_rubiks_guy.mp4 " ).resize(fill().width(250 ).height(250 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' cld_rubiks_guy ' , {height : 250 , width : 250 , crop : " fill " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" cld_rubiks_guy " , {height : 250 , width : 250 , crop : " fill " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" cld_rubiks_guy.mp4 " ).resize(fill().width(250 ).height(250 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" cld_rubiks_guy " >
<Transformation height =" 250 " width =" 250 " crop =" fill " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" cld_rubiks_guy " >
<cld-transformation height =" 250 " width =" 250 " crop =" fill " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" cld_rubiks_guy.mp4 " ).resize(fill().width(250 ).height(250 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" cld_rubiks_guy " >
<cl-transformation height=" 250 " width=" 250 " crop=" fill " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(250 ).Width(250 ).Crop(" fill " )).BuildVideoTag(" cld_rubiks_guy " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setHeight(250 ).setWidth(250 ).setCrop(" fill " )).generate(" cld_rubiks_guy.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(250 ).width(250 ).crop(" fill " )).resourceType(" video " ).generate(" cld_rubiks_guy.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" cld_rubiks_guy.mp4 " )
resize(Resize.fill() { width(250 )
height(250 ) })
}.generate()
Fill a 250-pixel square with the top-left part (gravity northwest) of the Rubik's cube video:
Ruby (cloudinary 1.x):
cl_video_tag(" cld_rubiks_guy " , :aspect_ratio =>" 1.0 " , :gravity =>" north_west " , :width =>250 , :crop =>" fill " )
PHP (cloudinary_php 2.x):
(new VideoTag (' cld_rubiks_guy.mp4 ' ))
->resize(Resize ::fill()->width(250 )
->aspectRatio(1.0 )
->gravity(
Gravity ::compass(
Compass ::northWest()))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" cld_rubiks_guy " , array (" aspect_ratio " =>" 1.0 " , " gravity " =>" north_west " , " width " =>250 , " crop " =>" fill " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" cld_rubiks_guy " ).video(aspect_ratio=" 1.0 " , gravity=" north_west " , width=250 , crop=" fill " )
Node.js (cloudinary 1.x):
cloudinary.video(" cld_rubiks_guy " , {aspect_ratio : " 1.0 " , gravity : " north_west " , width : 250 , crop : " fill " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1.0 " ).gravity(" north_west " ).width(250 ).crop(" fill " )).videoTag(" cld_rubiks_guy " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" cld_rubiks_guy.mp4 " ).resize(
fill()
.width(250 )
.aspectRatio(" 1.0 " )
.gravity(compass(" north_west " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' cld_rubiks_guy ' , {aspectRatio : " 1.0 " , gravity : " north_west " , width : 250 , crop : " fill " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" cld_rubiks_guy " , {aspect_ratio : " 1.0 " , gravity : " north_west " , width : 250 , crop : " fill " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" cld_rubiks_guy.mp4 " ).resize(
fill()
.width(250 )
.aspectRatio(" 1.0 " )
.gravity(compass(" north_west " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" cld_rubiks_guy " >
<Transformation aspectRatio =" 1.0 " gravity =" north_west " width =" 250 " crop =" fill " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" cld_rubiks_guy " >
<cld-transformation aspect-ratio =" 1.0 " gravity =" north_west " width =" 250 " crop =" fill " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" cld_rubiks_guy.mp4 " ).resize(
fill()
.width(250 )
.aspectRatio(" 1.0 " )
.gravity(compass(" north_west " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" cld_rubiks_guy " >
<cl-transformation aspect-ratio=" 1.0 " gravity=" north_west " width=" 250 " crop=" fill " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio(" 1.0 " ).Gravity(" north_west " ).Width(250 ).Crop(" fill " )).BuildVideoTag(" cld_rubiks_guy " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAspectRatio(" 1.0 " ).setGravity(" north_west " ).setWidth(250 ).setCrop(" fill " )).generate(" cld_rubiks_guy.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1.0 " ).gravity(" north_west " ).width(250 ).crop(" fill " )).resourceType(" video " ).generate(" cld_rubiks_guy.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" cld_rubiks_guy.mp4 " )
resize(Resize.fill() { width(250 )
aspectRatio(1.0F )
gravity(
Gravity.compass(
Compass.northWest()))
})
}.generate()
The fill_pad
cropping mode tries to prevent a "bad crop" by adding padding to any frames where interesting content is lost if the standard fill
mode is applied. This is especially useful if the aspect ratio of the delivered video is considerably different from the original's aspect ratio. It is only supported in conjunction with Automatic cropping (g_auto).
The video on the left is delivered at 9:16 aspect ratio using the fill
crop mode, and the video on the right using the fill_pad
crop mode. You'll see the beginning of the video is cropped the same, but the video on the right then pads the video to ensure all of the subjects are shown.
Ruby (cloudinary 1.x):
cl_video_tag(" docs/g_auto_demo " , :transformation =>[
{:start_offset =>" 7.0 " },
{:aspect_ratio =>" 9:16 " , :gravity =>" auto " , :height =>400 , :crop =>" fill_pad " }
])
PHP (cloudinary_php 2.x):
(new VideoTag (' docs/g_auto_demo.mp4 ' ))
->videoEdit(VideoEdit ::trim ()->startOffset(7.0 ))
->resize(Resize ::fillPad()->height(400 )
->aspectRatio(" 9:16 " )
->gravity(
Gravity ::autoGravity())
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" docs/g_auto_demo " , array (" transformation " =>array (
array (" start_offset " =>" 7.0 " ),
array (" aspect_ratio " =>" 9:16 " , " gravity " =>" auto " , " height " =>400 , " crop " =>" fill_pad " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" docs/g_auto_demo " ).video(transformation=[
{' start_offset ' : " 7.0 " },
{' aspect_ratio ' : " 9:16 " , ' gravity ' : " auto " , ' height ' : 400 , ' crop ' : " fill_pad " }
])
Node.js (cloudinary 1.x):
cloudinary.video(" docs/g_auto_demo " , {transformation : [
{start_offset : " 7.0 " },
{aspect_ratio : " 9:16 " , gravity : " auto " , height : 400 , crop : " fill_pad " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.startOffset(" 7.0 " ).chain()
.aspectRatio(" 9:16 " ).gravity(" auto " ).height(400 ).crop(" fill_pad " )).videoTag(" docs/g_auto_demo " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" docs/g_auto_demo.mp4 " )
.videoEdit(trim().startOffset(" 7.0 " ))
.resize(
fillPad()
.height(400 )
.aspectRatio(" 9:16 " )
.gravity(autoGravity())
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' docs/g_auto_demo ' , {transformation : [
{startOffset : " 7.0 " },
{aspectRatio : " 9:16 " , gravity : " auto " , height : 400 , crop : " fill_pad " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" docs/g_auto_demo " , {transformation : [
{start_offset : " 7.0 " },
{aspect_ratio : " 9:16 " , gravity : " auto " , height : 400 , crop : " fill_pad " }
]})
React (@cloudinary/react 1.x):
new CloudinaryVideo(" docs/g_auto_demo.mp4 " )
.videoEdit(trim().startOffset(" 7.0 " ))
.resize(
fillPad()
.height(400 )
.aspectRatio(" 9:16 " )
.gravity(autoGravity())
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" docs/g_auto_demo " >
<Transformation startOffset =" 7.0 " />
<Transformation aspectRatio =" 9:16 " gravity =" auto " height =" 400 " crop =" fill_pad " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" docs/g_auto_demo " >
<cld-transformation start-offset =" 7.0 " />
<cld-transformation aspect-ratio =" 9:16 " gravity =" auto " height =" 400 " crop =" fill_pad " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" docs/g_auto_demo.mp4 " )
.videoEdit(trim().startOffset(" 7.0 " ))
.resize(
fillPad()
.height(400 )
.aspectRatio(" 9:16 " )
.gravity(autoGravity())
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" docs/g_auto_demo " >
<cl-transformation start-offset=" 7.0 " >
</ cl-transformation>
<cl-transformation aspect-ratio="9:16" gravity="auto" height="400" crop="fill_pad">
< / cl-transformation>
</ cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
.StartOffset(" 7.0 " ).Chain()
.AspectRatio(" 9:16 " ).Gravity(" auto " ).Height(400 ).Crop(" fill_pad " )).BuildVideoTag(" docs/g_auto_demo " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation()
.setStartOffset(" 7.0 " ).chain()
.setAspectRatio(" 9:16 " ).setGravity(" auto " ).setHeight(400 ).setCrop(" fill_pad " )).generate(" docs/g_auto_demo.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.startOffset(" 7.0 " ).chain()
.aspectRatio(" 9:16 " ).gravity(" auto " ).height(400 ).crop(" fill_pad " )).resourceType(" video " ).generate(" docs/g_auto_demo.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" docs/g_auto_demo.mp4 " )
videoEdit(VideoEdit.trim() { startOffset(7.0F ) })
resize(Resize.fillPad() { height(400 )
aspectRatio(" 9:16 " )
gravity(
Gravity.autoGravity())
})
}.generate()
c_fill
c_fill_pad
The crop
cropping mode extracts a region of the specified dimensions from the original video. No scaling is applied, so applying the crop
mode to the same video of different resolutions can provide very different results. You can specify the gravity parameter to select which area or object to extract, or use fixed coordinates cropping .
Crop the dog video to a width of 200 pixels and a height of 150 pixels, with north gravity:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :gravity =>" north " , :height =>150 , :width =>200 , :crop =>" crop " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::crop()->width(200 )
->height(150 )
->gravity(
Gravity ::compass(
Compass ::north()))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" gravity " =>" north " , " height " =>150 , " width " =>200 , " crop " =>" crop " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(gravity=" north " , height=150 , width=200 , crop=" crop " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {gravity : " north " , height : 150 , width : 200 , crop : " crop " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().gravity(" north " ).height(150 ).width(200 ).crop(" crop " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
crop()
.width(200 )
.height(150 )
.gravity(compass(" north " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {gravity : " north " , height : 150 , width : 200 , crop : " crop " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {gravity : " north " , height : 150 , width : 200 , crop : " crop " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
crop()
.width(200 )
.height(150 )
.gravity(compass(" north " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation gravity =" north " height =" 150 " width =" 200 " crop =" crop " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation gravity =" north " height =" 150 " width =" 200 " crop =" crop " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
crop()
.width(200 )
.height(150 )
.gravity(compass(" north " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation gravity=" north " height=" 150 " width=" 200 " crop=" crop " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Gravity(" north " ).Height(150 ).Width(200 ).Crop(" crop " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setGravity(" north " ).setHeight(150 ).setWidth(200 ).setCrop(" crop " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().gravity(" north " ).height(150 ).width(200 ).crop(" crop " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.crop() { width(200 )
height(150 )
gravity(
Gravity.compass(
Compass.north()))
})
}.generate()
Crop the dog video to a width of 450 pixels and an aspect ratio of 2.5:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :aspect_ratio =>" 2.5 " , :width =>450 , :crop =>" crop " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::crop()->width(450 )
->aspectRatio(2.5 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" aspect_ratio " =>" 2.5 " , " width " =>450 , " crop " =>" crop " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(aspect_ratio=" 2.5 " , width=450 , crop=" crop " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {aspect_ratio : " 2.5 " , width : 450 , crop : " crop " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 2.5 " ).width(450 ).crop(" crop " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(crop().width(450 ).aspectRatio(2.5 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {aspectRatio : " 2.5 " , width : 450 , crop : " crop " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {aspect_ratio : " 2.5 " , width : 450 , crop : " crop " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(crop().width(450 ).aspectRatio(2.5 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation aspectRatio =" 2.5 " width =" 450 " crop =" crop " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation aspect-ratio =" 2.5 " width =" 450 " crop =" crop " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(crop().width(450 ).aspectRatio(2.5 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation aspect-ratio=" 2.5 " width=" 450 " crop=" crop " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio(" 2.5 " ).Width(450 ).Crop(" crop " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAspectRatio(" 2.5 " ).setWidth(450 ).setCrop(" crop " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 2.5 " ).width(450 ).crop(" crop " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.crop() { width(450 )
aspectRatio(2.5F ) })
}.generate()
You can specify a region of the original video to crop by giving the x
and y
coordinates of the top left corner of the region together with the width
and height
of the region. You can also use percentage based numbers instead of the exact coordinates for x
, y
, w
and h
(e.g., 0.5 for 50%) . Use this method when you know beforehand what the correct absolute cropping coordinates are, as in when your users manually select the region to crop out of the original video.
To resize the Rubik's cube video to focus mainly on the cube, the video is cropped to a 150x150 region starting at the coordinate x = 10 and y = 80:
Ruby (cloudinary 1.x):
cl_video_tag(" docs/cld_rubiks_guy " , :height =>150 , :width =>150 , :x =>10 , :y =>80 , :crop =>" crop " )
PHP (cloudinary_php 2.x):
(new VideoTag (' docs/cld_rubiks_guy.mp4 ' ))
->resize(Resize ::crop()->width(150 )
->height(150 )
->x(10 )
->y(80 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" docs/cld_rubiks_guy " , array (" height " =>150 , " width " =>150 , " x " =>10 , " y " =>80 , " crop " =>" crop " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" docs/cld_rubiks_guy " ).video(height=150 , width=150 , x=10 , y=80 , crop=" crop " )
Node.js (cloudinary 1.x):
cloudinary.video(" docs/cld_rubiks_guy " , {height : 150 , width : 150 , x : 10 , y : 80 , crop : " crop " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(150 ).width(150 ).x(10 ).y(80 ).crop(" crop " )).videoTag(" docs/cld_rubiks_guy " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" docs/cld_rubiks_guy.mp4 " ).resize(
crop().width(150 ).height(150 ).x(10 ).y(80 )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' docs/cld_rubiks_guy ' , {height : 150 , width : 150 , x : 10 , y : 80 , crop : " crop " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" docs/cld_rubiks_guy " , {height : 150 , width : 150 , x : 10 , y : 80 , crop : " crop " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" docs/cld_rubiks_guy.mp4 " ).resize(
crop().width(150 ).height(150 ).x(10 ).y(80 )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" docs/cld_rubiks_guy " >
<Transformation height =" 150 " width =" 150 " x =" 10 " y =" 80 " crop =" crop " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" docs/cld_rubiks_guy " >
<cld-transformation height =" 150 " width =" 150 " x =" 10 " y =" 80 " crop =" crop " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" docs/cld_rubiks_guy.mp4 " ).resize(
crop().width(150 ).height(150 ).x(10 ).y(80 )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" docs/cld_rubiks_guy " >
<cl-transformation height=" 150 " width=" 150 " x=" 10 " y=" 80 " crop=" crop " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(150 ).Width(150 ).X(10 ).Y(80 ).Crop(" crop " )).BuildVideoTag(" docs/cld_rubiks_guy " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setHeight(150 ).setWidth(150 ).setX(10 ).setY(80 ).setCrop(" crop " )).generate(" docs/cld_rubiks_guy.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(150 ).width(150 ).x(10 ).y(80 ).crop(" crop " )).resourceType(" video " ).generate(" docs/cld_rubiks_guy.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" docs/cld_rubiks_guy.mp4 " )
resize(Resize.crop() { width(150 )
height(150 )
x(10 )
y(80 ) })
}.generate()
The scale
resize mode changes the size of the video exactly to the specified dimensions without necessarily retaining the original aspect ratio: all original video parts are visible but might be stretched or shrunk. If only the width or height is specified, then the video is scaled to the new dimension while retaining the original aspect ratio, unless you also include the ignore_aspect_ratio flag.
Scale the dog video to a width of 150 pixels (maintains the aspect ratio by default):
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :width =>150 , :crop =>" scale " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::scale()->width(150 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" width " =>150 , " crop " =>" scale " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(width=150 , crop=" scale " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {width : 150 , crop : " scale " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().width(150 ).crop(" scale " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(150 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {width : 150 , crop : " scale " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {width : 150 , crop : " scale " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(150 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation width =" 150 " crop =" scale " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation width =" 150 " crop =" scale " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(150 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation width=" 150 " crop=" scale " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(150 ).Crop(" scale " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setWidth(150 ).setCrop(" scale " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().width(150 ).crop(" scale " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.scale() { width(150 ) })
}.generate()
Scale the dog video to a width and height of 150 pixels without maintaining the aspect ratio:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :height =>150 , :width =>150 , :crop =>" scale " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::scale()->width(150 )
->height(150 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" height " =>150 , " width " =>150 , " crop " =>" scale " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(height=150 , width=150 , crop=" scale " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {height : 150 , width : 150 , crop : " scale " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(150 ).width(150 ).crop(" scale " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(150 ).height(150 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {height : 150 , width : 150 , crop : " scale " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {height : 150 , width : 150 , crop : " scale " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(150 ).height(150 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation height =" 150 " width =" 150 " crop =" scale " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation height =" 150 " width =" 150 " crop =" scale " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(150 ).height(150 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation height=" 150 " width=" 150 " crop=" scale " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(150 ).Width(150 ).Crop(" scale " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setHeight(150 ).setWidth(150 ).setCrop(" scale " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(150 ).width(150 ).crop(" scale " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.scale() { width(150 )
height(150 ) })
}.generate()
Scale the dog video to a width of 25% (maintains the aspect ratio by default):
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :width =>0.25 , :crop =>" scale " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::scale()->width(0.25 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" width " =>" 0.25 " , " crop " =>" scale " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(width=" 0.25 " , crop=" scale " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {width : " 0.25 " , crop : " scale " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().width(0.25 ).crop(" scale " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(0.25 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {width : " 0.25 " , crop : " scale " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {width : " 0.25 " , crop : " scale " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(0.25 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation width =" 0.25 " crop =" scale " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation width =" 0.25 " crop =" scale " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(0.25 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation width=" 0.25 " crop=" scale " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(0.25 ).Crop(" scale " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setWidth(0.25 ).setCrop(" scale " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().width(0.25 ).crop(" scale " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.scale() { width(0.25F ) })
}.generate()
Scale the dog video to a width of 100, changing the aspect ratio to 1:2:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :aspect_ratio =>" 1:2 " , :width =>100 , :crop =>" scale " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::scale()->width(100 )
->aspectRatio(" 1:2 " ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" aspect_ratio " =>" 1:2 " , " width " =>100 , " crop " =>" scale " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(aspect_ratio=" 1:2 " , width=100 , crop=" scale " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {aspect_ratio : " 1:2 " , width : 100 , crop : " scale " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1:2 " ).width(100 ).crop(" scale " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(100 ).aspectRatio(" 1:2 " ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {aspectRatio : " 1:2 " , width : 100 , crop : " scale " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {aspect_ratio : " 1:2 " , width : 100 , crop : " scale " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(100 ).aspectRatio(" 1:2 " ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation aspectRatio =" 1:2 " width =" 100 " crop =" scale " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation aspect-ratio =" 1:2 " width =" 100 " crop =" scale " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(100 ).aspectRatio(" 1:2 " ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation aspect-ratio=" 1:2 " width=" 100 " crop=" scale " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio(" 1:2 " ).Width(100 ).Crop(" scale " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAspectRatio(" 1:2 " ).setWidth(100 ).setCrop(" scale " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1:2 " ).width(100 ).crop(" scale " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.scale() { width(100 )
aspectRatio(" 1:2 " ) })
}.generate()
The fit
resize mode resizes the video so that it takes up as much space as possible within a bounding box defined by the specified dimensions. The original aspect ratio is retained and all of the original video is visible.
Resize the dog video to fit within a width and height of 250 pixels while retaining the aspect ratio:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :height =>250 , :width =>250 , :crop =>" fit " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::fit()->width(250 )
->height(250 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" height " =>250 , " width " =>250 , " crop " =>" fit " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(height=250 , width=250 , crop=" fit " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {height : 250 , width : 250 , crop : " fit " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(250 ).width(250 ).crop(" fit " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(fit().width(250 ).height(250 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {height : 250 , width : 250 , crop : " fit " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {height : 250 , width : 250 , crop : " fit " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(fit().width(250 ).height(250 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation height =" 250 " width =" 250 " crop =" fit " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation height =" 250 " width =" 250 " crop =" fit " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(fit().width(250 ).height(250 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation height=" 250 " width=" 250 " crop=" fit " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(250 ).Width(250 ).Crop(" fit " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setHeight(250 ).setWidth(250 ).setCrop(" fit " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(250 ).width(250 ).crop(" fit " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.fit() { width(250 )
height(250 ) })
}.generate()
Resize the dog video to fit within a 150-pixel square defined by aspect ratio and height:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :aspect_ratio =>" 1.0 " , :height =>150 , :crop =>" fit " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::fit()->height(150 )
->aspectRatio(1.0 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" aspect_ratio " =>" 1.0 " , " height " =>150 , " crop " =>" fit " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(aspect_ratio=" 1.0 " , height=150 , crop=" fit " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {aspect_ratio : " 1.0 " , height : 150 , crop : " fit " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(150 ).crop(" fit " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(fit().height(150 ).aspectRatio(" 1.0 " ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {aspectRatio : " 1.0 " , height : 150 , crop : " fit " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {aspect_ratio : " 1.0 " , height : 150 , crop : " fit " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(fit().height(150 ).aspectRatio(" 1.0 " ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation aspectRatio =" 1.0 " height =" 150 " crop =" fit " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation aspect-ratio =" 1.0 " height =" 150 " crop =" fit " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(fit().height(150 ).aspectRatio(" 1.0 " ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation aspect-ratio=" 1.0 " height=" 150 " crop=" fit " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio(" 1.0 " ).Height(150 ).Crop(" fit " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAspectRatio(" 1.0 " ).setHeight(150 ).setCrop(" fit " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(150 ).crop(" fit " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.fit() { height(150 )
aspectRatio(1.0F ) })
}.generate()
The limit
resize mode behaves the same as the fit
mode but only if the original video is larger than the specified limit (width and height), in which case the video is scaled down so that it takes up as much space as possible within a bounding box defined by the specified dimensions. The original aspect ratio is retained and all of the original video is visible. This mode doesn't scale up the video if your requested dimensions are larger than the original video's.
Limit the dog video to a width and height of 250 pixels while retaining the aspect ratio:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :height =>250 , :width =>250 , :crop =>" limit " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::limitFit()->width(250 )
->height(250 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" height " =>250 , " width " =>250 , " crop " =>" limit " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(height=250 , width=250 , crop=" limit " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {height : 250 , width : 250 , crop : " limit " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(250 ).width(250 ).crop(" limit " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(limitFit().width(250 ).height(250 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {height : 250 , width : 250 , crop : " limit " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {height : 250 , width : 250 , crop : " limit " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(limitFit().width(250 ).height(250 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation height =" 250 " width =" 250 " crop =" limit " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation height =" 250 " width =" 250 " crop =" limit " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(limitFit().width(250 ).height(250 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation height=" 250 " width=" 250 " crop=" limit " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(250 ).Width(250 ).Crop(" limit " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setHeight(250 ).setWidth(250 ).setCrop(" limit " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(250 ).width(250 ).crop(" limit " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.limitFit() { width(250 )
height(250 ) })
}.generate()
Limit the dog video to a 150-pixel square defined by aspect ratio and height:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :aspect_ratio =>" 1.0 " , :height =>150 , :crop =>" limit " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::limitFit()->height(150 )
->aspectRatio(1.0 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" aspect_ratio " =>" 1.0 " , " height " =>150 , " crop " =>" limit " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(aspect_ratio=" 1.0 " , height=150 , crop=" limit " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {aspect_ratio : " 1.0 " , height : 150 , crop : " limit " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(150 ).crop(" limit " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
limitFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {aspectRatio : " 1.0 " , height : 150 , crop : " limit " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {aspect_ratio : " 1.0 " , height : 150 , crop : " limit " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
limitFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation aspectRatio =" 1.0 " height =" 150 " crop =" limit " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation aspect-ratio =" 1.0 " height =" 150 " crop =" limit " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
limitFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation aspect-ratio=" 1.0 " height=" 150 " crop=" limit " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio(" 1.0 " ).Height(150 ).Crop(" limit " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAspectRatio(" 1.0 " ).setHeight(150 ).setCrop(" limit " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(150 ).crop(" limit " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.limitFit() { height(150 )
aspectRatio(1.0F ) })
}.generate()
The pad
resize mode resizes the video to fill the specified dimensions while retaining the original aspect ratio and with all of the original video visible. If the proportions of the original video do not match the specified dimensions, padding is added to the video to reach the required size. You can also specify where the original video is placed by using the gravity parameter (set to center
by default), and specify the color of the background in the case that padding is added.
Resize and pad the dog video with a black background to a width and height of 250 pixels:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :background =>" black " , :height =>250 , :width =>250 , :crop =>" pad " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::pad()->width(250 )
->height(250 )
->background(
Background ::color(Color ::BLACK ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" background " =>" black " , " height " =>250 , " width " =>250 , " crop " =>" pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(background=" black " , height=250 , width=250 , crop=" pad " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {background : " black " , height : 250 , width : 250 , crop : " pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" black " ).height(250 ).width(250 ).crop(" pad " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
pad()
.width(250 )
.height(250 )
.background(color(" black " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {background : " black " , height : 250 , width : 250 , crop : " pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {background : " black " , height : 250 , width : 250 , crop : " pad " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
pad()
.width(250 )
.height(250 )
.background(color(" black " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation background =" black " height =" 250 " width =" 250 " crop =" pad " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation background =" black " height =" 250 " width =" 250 " crop =" pad " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
pad()
.width(250 )
.height(250 )
.background(color(" black " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation background=" black " height=" 250 " width=" 250 " crop=" pad " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background(" black " ).Height(250 ).Width(250 ).Crop(" pad " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setBackground(" black " ).setHeight(250 ).setWidth(250 ).setCrop(" pad " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" black " ).height(250 ).width(250 ).crop(" pad " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.pad() { width(250 )
height(250 )
background(
Background.color(Color .BLACK))
})
}.generate()
Resize and pad the dog video with a black background to a rectangle of height of 150 pixels, and aspect ratio 2:1:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :aspect_ratio =>" 2:1 " , :background =>" black " , :height =>150 , :crop =>" pad " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::pad()->height(150 )
->aspectRatio(" 2:1 " )
->background(
Background ::color(Color ::BLACK ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" aspect_ratio " =>" 2:1 " , " background " =>" black " , " height " =>150 , " crop " =>" pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(aspect_ratio=" 2:1 " , background=" black " , height=150 , crop=" pad " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {aspect_ratio : " 2:1 " , background : " black " , height : 150 , crop : " pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 2:1 " ).background(" black " ).height(150 ).crop(" pad " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
pad()
.height(150 )
.aspectRatio(" 2:1 " )
.background(color(" black " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {aspectRatio : " 2:1 " , background : " black " , height : 150 , crop : " pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {aspect_ratio : " 2:1 " , background : " black " , height : 150 , crop : " pad " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
pad()
.height(150 )
.aspectRatio(" 2:1 " )
.background(color(" black " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation aspectRatio =" 2:1 " background =" black " height =" 150 " crop =" pad " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation aspect-ratio =" 2:1 " background =" black " height =" 150 " crop =" pad " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
pad()
.height(150 )
.aspectRatio(" 2:1 " )
.background(color(" black " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation aspect-ratio=" 2:1 " background=" black " height=" 150 " crop=" pad " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio(" 2:1 " ).Background(" black " ).Height(150 ).Crop(" pad " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAspectRatio(" 2:1 " ).setBackground(" black " ).setHeight(150 ).setCrop(" pad " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 2:1 " ).background(" black " ).height(150 ).crop(" pad " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.pad() { height(150 )
aspectRatio(" 2:1 " )
background(
Background.color(Color .BLACK))
})
}.generate()
You may sometimes need to deliver a video with an aspect ratio very different than the target video player dimensions, for example delivering a portrait video in a landscape-oriented video player. In these cases, you can use a blurred version of the same video as the padding background. To do this, specify the blurred
value instead of a color as the background
. You can also optionally specify the intensity of the blur effect (range: 1-2000, default 100) and the brightness of the background video (range: -300-100, default 0).
For example, deliver the Rubik's cube video in a 320*480 HTML5 video player by padding the portrait video with a blurred version of the same video at an intensity of 400
and a brightness of 15
.
Ruby (cloudinary 1.x):
cl_video_tag(" cld_rubiks_guy " , :background =>" blurred:400:15 " , :height =>320 , :width =>480 , :crop =>" pad " )
PHP (cloudinary_php 2.x):
(new VideoTag (' cld_rubiks_guy.mp4 ' ))
->resize(Resize ::pad()->width(480 )
->height(320 )
->background(
Background ::blurred()->intensity(400 )
->brightness(15 ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" cld_rubiks_guy " , array (" background " =>" blurred:400:15 " , " height " =>320 , " width " =>480 , " crop " =>" pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" cld_rubiks_guy " ).video(background=" blurred:400:15 " , height=320 , width=480 , crop=" pad " )
Node.js (cloudinary 1.x):
cloudinary.video(" cld_rubiks_guy " , {background : " blurred:400:15 " , height : 320 , width : 480 , crop : " pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" blurred:400:15 " ).height(320 ).width(480 ).crop(" pad " )).videoTag(" cld_rubiks_guy " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" cld_rubiks_guy.mp4 " ).resize(
pad()
.width(480 )
.height(320 )
.background(blurred().intensity(400 ).brightness(15 ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' cld_rubiks_guy ' , {background : " blurred:400:15 " , height : 320 , width : 480 , crop : " pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" cld_rubiks_guy " , {background : " blurred:400:15 " , height : 320 , width : 480 , crop : " pad " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" cld_rubiks_guy.mp4 " ).resize(
pad()
.width(480 )
.height(320 )
.background(blurred().intensity(400 ).brightness(15 ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" cld_rubiks_guy " >
<Transformation background =" blurred:400:15 " height =" 320 " width =" 480 " crop =" pad " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" cld_rubiks_guy " >
<cld-transformation background =" blurred:400:15 " height =" 320 " width =" 480 " crop =" pad " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" cld_rubiks_guy.mp4 " ).resize(
pad()
.width(480 )
.height(320 )
.background(blurred().intensity(400 ).brightness(15 ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" cld_rubiks_guy " >
<cl-transformation background=" blurred:400:15 " height=" 320 " width=" 480 " crop=" pad " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background(" blurred:400:15 " ).Height(320 ).Width(480 ).Crop(" pad " )).BuildVideoTag(" cld_rubiks_guy " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setBackground(" blurred:400:15 " ).setHeight(320 ).setWidth(480 ).setCrop(" pad " )).generate(" cld_rubiks_guy.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" blurred:400:15 " ).height(320 ).width(480 ).crop(" pad " )).resourceType(" video " ).generate(" cld_rubiks_guy.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" cld_rubiks_guy.mp4 " )
resize(Resize.pad() { width(480 )
height(320 )
background(
Background.blurred() { intensity(400 )
brightness(15 ) })
})
}.generate()
The lpad
resize mode behaves the same as the pad
mode but only if the original video is larger than the specified limit (width and height), in which case the video is scaled down to fill the specified dimensions while retaining the original aspect ratio and with all of the original video visible. This mode doesn't scale up the video if your requested dimensions are bigger than the original video's. If the proportions of the original video do not match the specified dimensions, padding is added to the video to reach the required size. You can also specify where the original video is placed by using the gravity parameter (set to center
by default), and specify the color of the background in the case that padding is added.
Limit the dog video to a bounding box of 400 x 150 pixels, and pad with a green background:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :background =>" green " , :height =>150 , :width =>400 , :crop =>" lpad " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::limitPad()->width(400 )
->height(150 )
->background(
Background ::color(Color ::GREEN ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" background " =>" green " , " height " =>150 , " width " =>400 , " crop " =>" lpad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(background=" green " , height=150 , width=400 , crop=" lpad " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {background : " green " , height : 150 , width : 400 , crop : " lpad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" green " ).height(150 ).width(400 ).crop(" lpad " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
limitPad()
.width(400 )
.height(150 )
.background(color(" green " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {background : " green " , height : 150 , width : 400 , crop : " lpad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {background : " green " , height : 150 , width : 400 , crop : " lpad " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
limitPad()
.width(400 )
.height(150 )
.background(color(" green " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation background =" green " height =" 150 " width =" 400 " crop =" lpad " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation background =" green " height =" 150 " width =" 400 " crop =" lpad " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
limitPad()
.width(400 )
.height(150 )
.background(color(" green " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation background=" green " height=" 150 " width=" 400 " crop=" lpad " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background(" green " ).Height(150 ).Width(400 ).Crop(" lpad " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setBackground(" green " ).setHeight(150 ).setWidth(400 ).setCrop(" lpad " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" green " ).height(150 ).width(400 ).crop(" lpad " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.limitPad() { width(400 )
height(150 )
background(
Background.color(Color .GREEN))
})
}.generate()
Limit the dog video to a bounding box specified by an aspect ratio of 0.66 with a width of 100 pixels, and pad with a green background:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :aspect_ratio =>" 0.66 " , :background =>" green " , :width =>100 , :crop =>" lpad " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::limitPad()->width(100 )
->aspectRatio(0.66 )
->background(
Background ::color(Color ::GREEN ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" aspect_ratio " =>" 0.66 " , " background " =>" green " , " width " =>100 , " crop " =>" lpad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(aspect_ratio=" 0.66 " , background=" green " , width=100 , crop=" lpad " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {aspect_ratio : " 0.66 " , background : " green " , width : 100 , crop : " lpad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 0.66 " ).background(" green " ).width(100 ).crop(" lpad " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
limitPad()
.width(100 )
.aspectRatio(0.66 )
.background(color(" green " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {aspectRatio : " 0.66 " , background : " green " , width : 100 , crop : " lpad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {aspect_ratio : " 0.66 " , background : " green " , width : 100 , crop : " lpad " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
limitPad()
.width(100 )
.aspectRatio(0.66 )
.background(color(" green " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation aspectRatio =" 0.66 " background =" green " width =" 100 " crop =" lpad " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation aspect-ratio =" 0.66 " background =" green " width =" 100 " crop =" lpad " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
limitPad()
.width(100 )
.aspectRatio(0.66 )
.background(color(" green " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation aspect-ratio=" 0.66 " background=" green " width=" 100 " crop=" lpad " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio(" 0.66 " ).Background(" green " ).Width(100 ).Crop(" lpad " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAspectRatio(" 0.66 " ).setBackground(" green " ).setWidth(100 ).setCrop(" lpad " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 0.66 " ).background(" green " ).width(100 ).crop(" lpad " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.limitPad() { width(100 )
aspectRatio(0.66F )
background(
Background.color(Color .GREEN))
})
}.generate()
When used with cropping modes that crop out part of a video, the gravity
qualifier (g
in URLs) specifies which part of the original video to keep when one or both of the requested dimensions is smaller than the original.
The basic gravity value is specified by giving a compass direction to include: north_east
, north
, north_west
, west
, south_west
, south
, south_east
, east
, or center
(the default value). The compass direction represents a location in the video, for example, north_east
represents the top right corner.
For example, fill a 250-pixel square with the dog video while retaining the aspect ratio:
Original video: PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video()
Node.js (cloudinary 1.x):
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' ).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " )
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
</ cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
}.generate()
With gravity set to north: Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :gravity =>" north " , :height =>250 , :width =>250 , :crop =>" fill " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::fill()->width(250 )
->height(250 )
->gravity(
Gravity ::compass(
Compass ::north()))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" gravity " =>" north " , " height " =>250 , " width " =>250 , " crop " =>" fill " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(gravity=" north " , height=250 , width=250 , crop=" fill " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {gravity : " north " , height : 250 , width : 250 , crop : " fill " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().gravity(" north " ).height(250 ).width(250 ).crop(" fill " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
fill()
.width(250 )
.height(250 )
.gravity(compass(" north " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {gravity : " north " , height : 250 , width : 250 , crop : " fill " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {gravity : " north " , height : 250 , width : 250 , crop : " fill " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
fill()
.width(250 )
.height(250 )
.gravity(compass(" north " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation gravity =" north " height =" 250 " width =" 250 " crop =" fill " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation gravity =" north " height =" 250 " width =" 250 " crop =" fill " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
fill()
.width(250 )
.height(250 )
.gravity(compass(" north " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation gravity=" north " height=" 250 " width=" 250 " crop=" fill " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Gravity(" north " ).Height(250 ).Width(250 ).Crop(" fill " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setGravity(" north " ).setHeight(250 ).setWidth(250 ).setCrop(" fill " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().gravity(" north " ).height(250 ).width(250 ).crop(" fill " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.fill() { width(250 )
height(250 )
gravity(
Gravity.compass(
Compass.north()))
})
}.generate()
With gravity set to south_east: Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :gravity =>" south_east " , :height =>250 , :width =>250 , :crop =>" fill " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::fill()->width(250 )
->height(250 )
->gravity(
Gravity ::compass(
Compass ::southEast()))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" gravity " =>" south_east " , " height " =>250 , " width " =>250 , " crop " =>" fill " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(gravity=" south_east " , height=250 , width=250 , crop=" fill " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {gravity : " south_east " , height : 250 , width : 250 , crop : " fill " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().gravity(" south_east " ).height(250 ).width(250 ).crop(" fill " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
fill()
.width(250 )
.height(250 )
.gravity(compass(" south_east " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {gravity : " south_east " , height : 250 , width : 250 , crop : " fill " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {gravity : " south_east " , height : 250 , width : 250 , crop : " fill " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
fill()
.width(250 )
.height(250 )
.gravity(compass(" south_east " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation gravity =" south_east " height =" 250 " width =" 250 " crop =" fill " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation gravity =" south_east " height =" 250 " width =" 250 " crop =" fill " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(
fill()
.width(250 )
.height(250 )
.gravity(compass(" south_east " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation gravity=" south_east " height=" 250 " width=" 250 " crop=" fill " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Gravity(" south_east " ).Height(250 ).Width(250 ).Crop(" fill " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setGravity(" south_east " ).setHeight(250 ).setWidth(250 ).setCrop(" fill " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().gravity(" south_east " ).height(250 ).width(250 ).crop(" fill " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.fill() { width(250 )
height(250 )
gravity(
Gravity.compass(
Compass.southEast()))
})
}.generate()
Automatic gravity selection ensures that the most interesting areas are selected as the main focus throughout the duration of each video. Each video is analyzed to find the optimal region, allowing you to adjust the size or aspect ratio to fit all of your requirements. As the optimal region of the video could be moving from frame to frame, the cropped area will adjust accordingly. To adjust the behavior of the automatic cropping algorithm to focus on faces within a video, you can also specify an additional focal preference .
The automatic cropping algorithm analyzes the entire video to determine the areas to focus on, which means it can take several seconds or minutes, depending on the length of the original video (an HTTP 423
error will be returned until the analysis is complete). Therefore, it's recommended to generate the transformation eagerly during upload or using an explicit method call for existing videos, along with an eager_notification_url
parameter to notify your application when the content aware cropping transformation is ready for delivery.
Once a video has been analyzed by the automatic cropping algorithm, any subsequent transformations happen on the fly as usual. This includes adjusting the size and aspect ratio.
You can only use automatic gravity once per transformation and not within a layer.
You can add the getinfo flag (fl_getinfo in URLs
) in your transformation to return the proposed g_auto
cropping results, including confidence scores in JSON, instead of delivering the transformed video. You can then integrate the g_auto results into an external workflow.
Apply automatic content-aware gravity by cropping your video with either the fill or fill pad crop modes and setting the gravity
transformation parameter to auto
(g_auto
in URLs).
For example, to crop this video to a square aspect ratio whilst keeping the ship as the main focus throughout, using the fill
crop mode:
Ruby (cloudinary 1.x):
cl_video_tag(" ship " , :aspect_ratio =>" 1:1 " , :gravity =>" auto " , :width =>300 , :crop =>" fill " )
PHP (cloudinary_php 2.x):
(new VideoTag (' ship.mp4 ' ))
->resize(Resize ::fill()->width(300 )
->aspectRatio(
AspectRatio ::ar1X1())
->gravity(
Gravity ::autoGravity())
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" ship " , array (" aspect_ratio " =>" 1:1 " , " gravity " =>" auto " , " width " =>300 , " crop " =>" fill " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" ship " ).video(aspect_ratio=" 1:1 " , gravity=" auto " , width=300 , crop=" fill " )
Node.js (cloudinary 1.x):
cloudinary.video(" ship " , {aspect_ratio : " 1:1 " , gravity : " auto " , width : 300 , crop : " fill " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1:1 " ).gravity(" auto " ).width(300 ).crop(" fill " )).videoTag(" ship " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" ship.mp4 " ).resize(
fill()
.width(300 )
.aspectRatio(ar1X1())
.gravity(autoGravity())
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' ship ' , {aspectRatio : " 1:1 " , gravity : " auto " , width : 300 , crop : " fill " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" ship " , {aspect_ratio : " 1:1 " , gravity : " auto " , width : 300 , crop : " fill " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" ship.mp4 " ).resize(
fill()
.width(300 )
.aspectRatio(ar1X1())
.gravity(autoGravity())
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" ship " >
<Transformation aspectRatio =" 1:1 " gravity =" auto " width =" 300 " crop =" fill " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" ship " >
<cld-transformation aspect-ratio =" 1:1 " gravity =" auto " width =" 300 " crop =" fill " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" ship.mp4 " ).resize(
fill()
.width(300 )
.aspectRatio(ar1X1())
.gravity(autoGravity())
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" ship " >
<cl-transformation aspect-ratio=" 1:1 " gravity=" auto " width=" 300 " crop=" fill " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio(" 1:1 " ).Gravity(" auto " ).Width(300 ).Crop(" fill " )).BuildVideoTag(" ship " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAspectRatio(" 1:1 " ).setGravity(" auto " ).setWidth(300 ).setCrop(" fill " )).generate(" ship.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1:1 " ).gravity(" auto " ).width(300 ).crop(" fill " )).resourceType(" video " ).generate(" ship.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" ship.mp4 " )
resize(Resize.fill() { width(300 )
aspectRatio(
AspectRatio.ar1X1())
gravity(
Gravity.autoGravity())
})
}.generate()
In some cases, you may find that cropping to a different aspect ratio cuts out interesting parts of the content. If this is the case, consider using the fill pad crop mode with automatic cropping, which uses padding where necessary to keep more of the interesting content in the crop.
For example, this rollercoaster video automatically adjusts the aspect ratio and padding to keep the two people in the frame as much as possible:
Ruby (cloudinary 1.x):
cl_video_tag(" docs/Roller_Coaster " , :aspect_ratio =>" 1.0 " , :gravity =>" auto " , :width =>400 , :crop =>" fill_pad " )
PHP (cloudinary_php 2.x):
(new VideoTag (' docs/Roller_Coaster.mp4 ' ))
->resize(Resize ::fillPad()->width(400 )
->aspectRatio(1.0 )
->gravity(
Gravity ::autoGravity())
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" docs/Roller_Coaster " , array (" aspect_ratio " =>" 1.0 " , " gravity " =>" auto " , " width " =>400 , " crop " =>" fill_pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" docs/Roller_Coaster " ).video(aspect_ratio=" 1.0 " , gravity=" auto " , width=400 , crop=" fill_pad " )
Node.js (cloudinary 1.x):
cloudinary.video(" docs/Roller_Coaster " , {aspect_ratio : " 1.0 " , gravity : " auto " , width : 400 , crop : " fill_pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1.0 " ).gravity(" auto " ).width(400 ).crop(" fill_pad " )).videoTag(" docs/Roller_Coaster " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" docs/Roller_Coaster.mp4 " ).resize(
fillPad()
.width(400 )
.aspectRatio(" 1.0 " )
.gravity(autoGravity())
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' docs/Roller_Coaster ' , {aspectRatio : " 1.0 " , gravity : " auto " , width : 400 , crop : " fill_pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" docs/Roller_Coaster " , {aspect_ratio : " 1.0 " , gravity : " auto " , width : 400 , crop : " fill_pad " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" docs/Roller_Coaster.mp4 " ).resize(
fillPad()
.width(400 )
.aspectRatio(" 1.0 " )
.gravity(autoGravity())
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" docs/Roller_Coaster " >
<Transformation aspectRatio =" 1.0 " gravity =" auto " width =" 400 " crop =" fill_pad " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" docs/Roller_Coaster " >
<cld-transformation aspect-ratio =" 1.0 " gravity =" auto " width =" 400 " crop =" fill_pad " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" docs/Roller_Coaster.mp4 " ).resize(
fillPad()
.width(400 )
.aspectRatio(" 1.0 " )
.gravity(autoGravity())
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" docs/Roller_Coaster " >
<cl-transformation aspect-ratio=" 1.0 " gravity=" auto " width=" 400 " crop=" fill_pad " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio(" 1.0 " ).Gravity(" auto " ).Width(400 ).Crop(" fill_pad " )).BuildVideoTag(" docs/Roller_Coaster " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAspectRatio(" 1.0 " ).setGravity(" auto " ).setWidth(400 ).setCrop(" fill_pad " )).generate(" docs/Roller_Coaster.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1.0 " ).gravity(" auto " ).width(400 ).crop(" fill_pad " )).resourceType(" video " ).generate(" docs/Roller_Coaster.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" docs/Roller_Coaster.mp4 " )
resize(Resize.fillPad() { width(400 )
aspectRatio(1.0F )
gravity(
Gravity.autoGravity())
})
}.generate()
By default, the automatic cropping algorithm uses a gaze prediction algorithm to identify the most interesting areas of the video. To adjust the algorithm that is used and detect a single face or multiple faces, specify the focal preference. The available options are:
g_auto:face
: Focuses the crop on the largest face detected in the video.
g_auto:faces
: Focuses the crop on all the detected faces in the video.
The examples below show the difference between the two face detection options.
g_auto:faces
g_auto:face
Below is a comparison between the original video of a dog catching a frisbee, and the same video with the aspect ratio inverted. The left video was cropped using default center gravity and the other using automatic gravity. Watch how the auto cropped (right-hand) video keeps the main subject (the dog) in view at all times, even as it moves across the frame in the original video.
Click any video below to see the comparison in action or use our automatic cropping demo to try it on a variety of samples or on your own videos.
Original video
Default crop (Center gravity)
Auto-gravity
You could also use automatic cropping to show the correct video depending on the device orientation. If the user lands on the page whilst browsing in portrait orientation, you could set the HTML5 video source to a vertical video that has been automatically cropped. If the user switches to landscape, then the source reverts back to the original landscape video. The CodeSandbox below is a very simple example of how you could do this. Use the "Change Orientation" button to simulate rotating a device, or try it out on mobile.
This code is also available in GitHub .
Different devices support different DPR values, which is defined as the ratio between physical pixels and logical pixels. This means that a device with support for a higher DPR uses more physical pixels for displaying a video, resulting in a clearer, sharper video.
Use the dpr
parameter to set the DPR value of the delivered video. The parameter accepts a numeric value specifying the DPR multiplier.
For example, the following URL dynamically generates the video named dog
scaled to a width of 100 pixels. Setting the dpr value to 1.0, 2.0 (as in the code example) or 3.0 generates the following videos, while resizing the video to match the required DPR.
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :transformation =>[
{:width =>100 , :crop =>" scale " },
{:dpr =>2.0 }
])
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->resize(Resize ::scale()->width(100 ))
->delivery(Delivery ::dpr(2.0 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" transformation " =>array (
array (" width " =>100 , " crop " =>" scale " ),
array (" dpr " =>" 2.0 " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(transformation=[
{' width ' : 100 , ' crop ' : " scale " },
{' dpr ' : " 2.0 " }
])
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {transformation : [
{width : 100 , crop : " scale " },
{dpr : " 2.0 " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.width(100 ).crop(" scale " ).chain()
.dpr(2.0 )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(100 )).delivery(dpr(" 2.0 " ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {transformation : [
{width : 100 , crop : " scale " },
{dpr : " 2.0 " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {transformation : [
{width : 100 , crop : " scale " },
{dpr : " 2.0 " }
]})
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(100 )).delivery(dpr(" 2.0 " ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation width =" 100 " crop =" scale " />
<Transformation dpr =" 2.0 " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-video public -id=" dog " >
<cld-transformation width =" 100 " crop =" scale " />
<cld-transformation dpr =" 2.0 " />
</ cld-video>
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).resize(scale().width(100 )).delivery(dpr(" 2.0 " ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation width=" 100 " crop=" scale " >
</ cl-transformation>
<cl-transformation dpr="2.0">
< / cl-transformation>
</ cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
.Width(100 ).Crop(" scale " ).Chain()
.Dpr(2.0 )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation()
.setWidth(100 ).setCrop(" scale " ).chain()
.setDpr(2.0 )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.width(100 ).crop(" scale " ).chain()
.dpr(2.0 )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
resize(Resize.scale() { width(100 ) })
delivery(Delivery.dpr(2.0F ))
}.generate()
DPR 1.0
DPR 2.0
DPR 3.0
Now you can create an HTML video tag with the required dimensions and deliver a video with the resolution that best matches the specified pixel density of your users' devices. The three videos below are all displayed with a width of 200 pixels using the <video>
tag width attribute, while you see more details and a better visual result for the last two videos (dpr 2 and dpr 3 respectively) if you view this documentation using a device that supports a higher DPR.
<video poster =" https://res.cloudinary.com/demo/video/upload/c_scale,w_200/dpr_2.0/dog.jpg " width =" 200 " >
<source src =" https://res.cloudinary.com/demo/video/upload/c_scale,w_200/dpr_2.0/dog.webm " type =" video/webm " />
<source src =" https://res.cloudinary.com/demo/video/upload/c_scale,w_200/dpr_2.0/dog.mp4 " type =" video/mp4 " />
<source src =" https://res.cloudinary.com/demo/video/upload/c_scale,w_200/dpr_2.0/dog.ogv " type =" video/ogg " />
</video>
DPR 1.0 (200 width, 331KB)
DPR 2.0 (400 width, 437KB)
DPR 3.0 (600 width, 474KB)