Video transformations

Whether your web or mobile application delivers your organization's own carefully selected videos, videos uploaded by your end users (UGC), or both, you probably need to adjust the originals to fit the graphic design of your website or mobile application.

Cloudinary's dynamic URL transformations enable you to achieve those goals programmatically and on the fly without the need for graphic designers and fancy editing tools.

You can build these URLs manually in your code, or take advantage of Cloudinary's SDKs, which enable you to write your transformation code using intuitive syntax designed for your preferred programming language or framework and let the SDK automatically build these URLs for you.

Important

  • Your account's pricing plan is in part dependent on the total number of transformation operations performed during a billing cycle. These are primarily counted when Cloudinary generates a new 'derived resource' from an asset based on a transformation URL. For complete details, see How are transformations counted?
  • If you have many subscribers or you deliver long videos (for example, over 100,000 subscribers or videos longer than 12 minutes), you may be responsible to obtain a 3rd party license as per the terms of the MPEG LA license for AVC/H.264. This obligation is not in any way related to Cloudinary and applies equally to you whether or not the videos you deliver are delivered via Cloudinary's service.

Here are just a few examples of some popular use cases that you can accomplish on the fly by combining Cloudinary transformations:

Pad with blurred background
c_pad,b_blurred:400:15
Reversed video and progress bar effects
e_reverse/e_progressbar:bar:green
Add image and text layers
l_.../l_text:

See also: Image Transformations

Overview

Cloudinary allows you to easily transform your videos on the fly to any required format, style and dimension, and apply effects and other visual enhancements. You can also optimize your videos to deliver them with minimal file size alongside high visual quality for an improved user experience and minimal bandwidth. You can do all of this by implementing dynamic video transformation and delivery URLs.

Multiple users can then stream the transformed video even while it is being encoded and delivered via CDN. You can also deliver videos that were encoded in advance with eager or explicit transformations. Furthermore, Cloudinary supports HTTP progressive download for media players capable of progressive download playback.

With video transformations, you can:

  • Deliver videos using the video format that fits your needs.
  • Resize and crop your videos to the required dimensions using different scaling and cropping techniques, or use our smart auto-gravity to ensure the main subjects remain in focus throughout a cropped video.
  • Generate a new video by layering other videos, images or text on your base video.
  • Apply a variety of effects, filters, and other enhancements to help your video achieve the desired impact.

Related topics
The rest of this page describes the basics of working with Cloudinary video transformations.

The other pages in this guide provide details and use case examples on the various types of video transformations you can apply to your videos.

The Transformation URL API Reference details every transformation parameter available for both images and videos.

Quick example

Below you can see the transformation URL and the corresponding SDK code for generating a video with several transformation parameters applied. This transformation generates and delivers a skiing video where a copy of the original video is appended to the end of the original, but in reverse, and then yet another copy is appended playing forward again, but with a slow motion (negative acceleration) effect. This 3-part video's radius is set to max in order to give a telescope-like effect. Finally, the resulting video is scaled down to a width of 400 pixels before being delivered.

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("ski_jump", :transformation=>[
  {:flags=>"splice", :overlay=>"video:ski_jump"},
  {:effect=>"reverse"},
  {:flags=>"layer_apply"},
  {:flags=>"splice", :overlay=>"video:ski_jump"},
  {:effect=>"accelerate:-50"},
  {:flags=>"layer_apply"},
  {:width=>400, :crop=>"scale"},
  {:radius=>"max"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('ski_jump.mp4'))
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::videoSource("ski_jump")
  ->transformation((new Transformation())
  ->effect(Effect::reverse()))
  ))
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::videoSource("ski_jump")
  ->transformation((new Transformation())
  ->effect(Effect::accelerate()->rate(-50)))
  ))
  ->resize(Resize::scale()->width(400))
  ->roundCorners(RoundCorners::max());
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("ski_jump", array("transformation"=>array(
  array("flags"=>"splice", "overlay"=>"video:ski_jump"),
  array("effect"=>"reverse"),
  array("flags"=>"layer_apply"),
  array("flags"=>"splice", "overlay"=>"video:ski_jump"),
  array("effect"=>"accelerate:-50"),
  array("flags"=>"layer_apply"),
  array("width"=>400, "crop"=>"scale"),
  array("radius"=>"max")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("ski_jump").video(transformation=[
  {'flags': "splice", 'overlay': "video:ski_jump"},
  {'effect': "reverse"},
  {'flags': "layer_apply"},
  {'flags': "splice", 'overlay': "video:ski_jump"},
  {'effect': "accelerate:-50"},
  {'flags': "layer_apply"},
  {'width': 400, 'crop': "scale"},
  {'radius': "max"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("ski_jump", {transformation: [
  {flags: "splice", overlay: "video:ski_jump"},
  {effect: "reverse"},
  {flags: "layer_apply"},
  {flags: "splice", overlay: "video:ski_jump"},
  {effect: "accelerate:-50"},
  {flags: "layer_apply"},
  {width: 400, crop: "scale"},
  {radius: "max"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .flags("splice").overlay(new Layer().publicId("video:ski_jump")).chain()
  .effect("reverse").chain()
  .flags("layer_apply").chain()
  .flags("splice").overlay(new Layer().publicId("video:ski_jump")).chain()
  .effect("accelerate:-50").chain()
  .flags("layer_apply").chain()
  .width(400).crop("scale").chain()
  .radius("max")).videoTag("ski_jump");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('ski_jump', {transformation: [
  {flags: "splice", overlay: new cloudinary.Layer().publicId("video:ski_jump")},
  {effect: "reverse"},
  {flags: "layer_apply"},
  {flags: "splice", overlay: new cloudinary.Layer().publicId("video:ski_jump")},
  {effect: "accelerate:-50"},
  {flags: "layer_apply"},
  {width: 400, crop: "scale"},
  {radius: "max"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("ski_jump", {transformation: [
  {flags: "splice", overlay: new cloudinary.Layer().publicId("video:ski_jump")},
  {effect: "reverse"},
  {flags: "layer_apply"},
  {flags: "splice", overlay: new cloudinary.Layer().publicId("video:ski_jump")},
  {effect: "accelerate:-50"},
  {flags: "layer_apply"},
  {width: 400, crop: "scale"},
  {radius: "max"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
// This code example is not currently available.
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="ski_jump" >
  <Transformation flags="splice" overlay="video:ski_jump" />
  <Transformation effect="reverse" />
  <Transformation flags="layer_apply" />
  <Transformation flags="splice" overlay="video:ski_jump" />
  <Transformation effect="accelerate:-50" />
  <Transformation flags="layer_apply" />
  <Transformation width="400" crop="scale" />
  <Transformation radius="max" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="ski_jump" >
  <cld-transformation flags="splice" :overlay="video:ski_jump" />
  <cld-transformation effect="reverse" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation flags="splice" :overlay="video:ski_jump" />
  <cld-transformation effect="accelerate:-50" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation width="400" crop="scale" />
  <cld-transformation radius="max" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This code example is not currently available.
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="ski_jump" >
  <cl-transformation flags="splice" overlay="video:ski_jump">
  </cl-transformation>
  <cl-transformation effect="reverse">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation flags="splice" overlay="video:ski_jump">
  </cl-transformation>
  <cl-transformation effect="accelerate:-50">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation width="400" crop="scale">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Flags("splice").Overlay(new Layer().PublicId("video:ski_jump")).Chain()
  .Effect("reverse").Chain()
  .Flags("layer_apply").Chain()
  .Flags("splice").Overlay(new Layer().PublicId("video:ski_jump")).Chain()
  .Effect("accelerate:-50").Chain()
  .Flags("layer_apply").Chain()
  .Width(400).Crop("scale").Chain()
  .Radius("max")).BuildVideoTag("ski_jump")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setFlags("splice").setOverlay("video:ski_jump").chain()
  .setEffect("reverse").chain()
  .setFlags("layer_apply").chain()
  .setFlags("splice").setOverlay("video:ski_jump").chain()
  .setEffect("accelerate:-50").chain()
  .setFlags("layer_apply").chain()
  .setWidth(400).setCrop("scale").chain()
  .setRadius("max")).generate("ski_jump.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .flags("splice").overlay(new Layer().publicId("video:ski_jump")).chain()
  .effect("reverse").chain()
  .flags("layer_apply").chain()
  .flags("splice").overlay(new Layer().publicId("video:ski_jump")).chain()
  .effect("accelerate:-50").chain()
  .flags("layer_apply").chain()
  .width(400).crop("scale").chain()
  .radius("max")).resourceType("video").generate("ski_jump.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.

Transformation URL syntax

Your Cloudinary media assets are accessed using simple delivery HTTP or HTTPS URLs, which are then delivered to users via a worldwide fast CDN. The URL contains the public ID of the requested asset plus any optional transformation parameters. The public ID is the unique identifier of the asset and is either defined when uploading the asset to your Cloudinary account, or automatically assigned by Cloudinary (see Uploading Assets for more details on the various options for specifying the public ID).

Generating transformation URLs with Cloudinary SDKs

Cloudinary's SDKs automatically build the transformation URL for you. They allow you to continue working in your preferred developer framework and also provide helper methods to simplify building video tags and video transformation URLs.

Tip
You can also create your transformation URLs using the Transformation Editor, or take one of our Cookbook recipes as a starting point and then further modify it in the Transformation Editor to fit your needs. The editor generates the URL and SDK code for the transformation you define so that you can copy it in the language you require.

Transformation URL structure

The default Cloudinary asset delivery URL has the following structure:

https://res.cloudinary.com/<cloud_name>/<asset_type>/<delivery_type>/<transformations>/<version>/<public_id>.<extension>
element description
cloud_name The name of your Cloudinary account, a unique public identifier for URL building and API access.

Note: Paid customers on the Advanced plan or higher can request to use a private CDN or CNAME to customize the domain name used for your delivery URLs.

asset_type The type of asset to deliver. Valid values: image, video, or raw.

  • The image type includes still image and photo formats, animated images, PDFs, layered files, such as TIFF and PSD, and others.
  • The video type includes video and audio files.
  • The raw type includes any file uploaded to Cloudinary that does not fit in one of the above categories. In general, transformations cannot be performed on raw assets, but they can be delivered as-is for download purposes, or in some cases, they may be used in conjunction with your image or video transformations.

delivery_type The storage or delivery type. For details on all possible types, see Delivery types.
transformations Optional. One or more comma-separated transformation parameters in a single URL component, or a set of chained transformations in multiple URL components (separated by slashes). When the transformation URL is first accessed, the derived media file is created on the fly and delivered to your user. The derived file is also cached on the CDN and is immediately available to all subsequent users requesting the same asset.
version Optional. You can include the version in your delivery URL to bypass the cached version on the CDN and force delivery of the latest asset (in the case that an asset has been overwritten with a newer file). For simplicity, the version component is generally not included in the example URLs on this page. For details, see Asset versions.
public_id The unique identifier of the asset, including the folder structure if relevant.
extension Optional. The file extension of the requested delivery format for the asset. Default: The originally uploaded format or the format determined by f_auto, when used.

In the most general case of simply delivering videos that were uploaded to your Cloudinary account without any transformations, the delivery URL will be in the format:

https://res.cloudinary.com/<cloud_name>/video/upload/<public_id>.<extension>

For example, delivering the video with a public ID of: dog , uploaded to Cloudinary's demo account in mp4 format:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("dog")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('dog.mp4'));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("dog")
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("dog").video()
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("dog")
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().videoTag("dog");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog').toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("dog")
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4");
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="dog" >

</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="dog" >

</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="dog" >

</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().resourceType("video").generate("dog.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4") 
}.generate()

The following shows an example of delivering the same video with transformation parameters, where the video is scaled and cropped to fill a 250x300 pixel size and a blurring effect is applied:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:height=>300, :width=>250, :crop=>"fill"},
  {:effect=>"blur:300"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::fill()->width(250)
->height(300))
  ->effect(Effect::blur()->strength(300));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("height"=>300, "width"=>250, "crop"=>"fill"),
  array("effect"=>"blur:300")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'height': 300, 'width': 250, 'crop': "fill"},
  {'effect': "blur:300"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {height: 300, width: 250, crop: "fill"},
  {effect: "blur:300"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .height(300).width(250).crop("fill").chain()
  .effect("blur:300")).videoTag("dog");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4")
  .resize(fill().width(250).height(300))
  .effect(blur().strength(300));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {height: 300, width: 250, crop: "fill"},
  {effect: "blur:300"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {height: 300, width: 250, crop: "fill"},
  {effect: "blur:300"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4")
  .resize(fill().width(250).height(300))
  .effect(blur().strength(300));
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="dog" >
  <Transformation height="300" width="250" crop="fill" />
  <Transformation effect="blur:300" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation height="300" width="250" crop="fill" />
  <cld-transformation effect="blur:300" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4")
  .resize(fill().width(250).height(300))
  .effect(blur().strength(300));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation height="300" width="250" crop="fill">
  </cl-transformation>
  <cl-transformation effect="blur:300">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Height(300).Width(250).Crop("fill").Chain()
  .Effect("blur:300")).BuildVideoTag("dog")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setHeight(300).setWidth(250).setCrop("fill").chain()
  .setEffect("blur:300")).generate("dog.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .height(300).width(250).crop("fill").chain()
  .effect("blur:300")).resourceType("video").generate("dog.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.

Transformation URL tips

  • For customers with a Custom Domain Name (CNAME) - available for Cloudinary's Advanced plan and above - the basic video delivery URL becomes: https://<custom domain name>/video/upload....
  • You can convert and deliver your video in other supported video formats by simply changing the video format file extension. For details, see Delivering in a different format.
  • You can append an SEO-friendly suffix to your URL by replacing the video/upload element of the URL with videos and then appending the desired suffix with a slash (/) after the public ID and before the extension. For example, if you have a cooking video with a random public ID like: abc1def2, you can deliver your video as:

    https://res.cloudinary.com/<cloud_name>/videos/upload/a12345/cooking.mp4

    For more details, see Dynamic SEO suffixes.

Transformation URL video tutorial

The following video provides a quick demonstration of how dynamic transformation URLs work with both images and videos.

Delivery types

The delivery type element of the URL provides an indication about the way the asset will be delivered, although in most cases, the delivery type value is determined at the time that the asset is stored in your account.

The following delivery type values are supported:

Delivery type Description Learn more
upload The default delivery type for uploaded assets. In most cases, this delivery type indicates that the asset is publicly available. However, there are options you can use to restrict access to assets with an upload delivery type. This includes strict transformations and access mode settings) Upload API
private The URL for the original asset can be accessed only with a signed URL. Transformed versions of the asset are publicly available (unless strict transformations are also defined). Uploading private assets
authenticated Both original and transformed versions of the asset can be accessed only with a signed URL or an authentication token. Uploading authenticated assets

Delivering authenticated assets

list Generates a list of assets that have a specified tag.
Note: This isn't a delivery type in the classic sense, in that it doesn't relate to an individual asset. However, to use this feature, you specify list in the delivery type element of the URL.
Client-side asset lists

Tip
You can search for assets by delivery type using the Advanced Search in the Media Library. The most common types can be selected directly in the Type section of the General search tab. All other types can be selected from the More types list.

Parameter types

There are two types of transformation parameters:

  • Action parameters: Parameters that perform a specific transformation on the asset.
  • Qualifier parameters: Parameters that do not perform an action on their own, but rather alter the default behavior or otherwise adjust the outcome of the corresponding action parameter.

It's best practice to include only one action parameter per URL component.

If you want to apply multiple actions in a single transformation URL, apply them in separate chained components, where each action is performed on the result of the previous one.

Note
In some of the Cloudinary SDKs, this action separation rule is enforced.

In contrast, qualifier parameters must be included in the component with the action parameter they qualify.

  • Most qualifiers are optional, meaning the related action parameter can be used independently, but you can add optional qualifiers to modify the default behavior.
  • In some cases, an action parameter requires one or more qualifiers to fully define the transformation behavior.
  • There are a few parameters that can be used independently as action parameters, but can also be used in other scenarios as a qualifier for another action.

For example, the transformation below includes a crop action, a rounding action, and 2 effect actions. The qualifier transformations included in each action define additional adjustments on the transformation action's behavior:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("ski_jump", :transformation=>[
  {:aspect_ratio=>"1.0", :height=>300, :crop=>"fill"},
  {:radius=>"max", :background=>"red"},
  {:effect=>"fade:2000"},
  {:effect=>"boomerang", :duration=>"4"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('ski_jump.mp4'))
  ->resize(Resize::fill()->height(300)
->aspectRatio(1.0))
  ->roundCorners(RoundCorners::max())
  ->backgroundColor(Color::RED)
  ->effect(Effect::fadeIn()->duration(2000))
  ->videoEdit(VideoEdit::trim()->duration(4.0))
  ->effect(Effect::boomerang());
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("ski_jump", array("transformation"=>array(
  array("aspect_ratio"=>"1.0", "height"=>300, "crop"=>"fill"),
  array("radius"=>"max", "background"=>"red"),
  array("effect"=>"fade:2000"),
  array("effect"=>"boomerang", "duration"=>"4")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("ski_jump").video(transformation=[
  {'aspect_ratio': "1.0", 'height': 300, 'crop': "fill"},
  {'radius': "max", 'background': "red"},
  {'effect': "fade:2000"},
  {'effect': "boomerang", 'duration': "4"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("ski_jump", {transformation: [
  {aspect_ratio: "1.0", height: 300, crop: "fill"},
  {radius: "max", background: "red"},
  {effect: "fade:2000"},
  {effect: "boomerang", duration: "4"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .aspectRatio("1.0").height(300).crop("fill").chain()
  .radius("max").background("red").chain()
  .effect("fade:2000").chain()
  .effect("boomerang").duration("4")).videoTag("ski_jump");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('ski_jump', {transformation: [
  {aspectRatio: "1.0", height: 300, crop: "fill"},
  {radius: "max", background: "red"},
  {effect: "fade:2000"},
  {effect: "boomerang", duration: "4"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("ski_jump", {transformation: [
  {aspect_ratio: "1.0", height: 300, crop: "fill"},
  {radius: "max", background: "red"},
  {effect: "fade:2000"},
  {effect: "boomerang", duration: "4"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
// This code example is not currently available.
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="ski_jump" >
  <Transformation aspectRatio="1.0" height="300" crop="fill" />
  <Transformation radius="max" background="red" />
  <Transformation effect="fade:2000" />
  <Transformation effect="boomerang" duration="4" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="ski_jump" >
  <cld-transformation aspect-ratio="1.0" height="300" crop="fill" />
  <cld-transformation radius="max" background="red" />
  <cld-transformation effect="fade:2000" />
  <cld-transformation effect="boomerang" duration="4" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This code example is not currently available.
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="ski_jump" >
  <cl-transformation aspect-ratio="1.0" height="300" crop="fill">
  </cl-transformation>
  <cl-transformation radius="max" background="red">
  </cl-transformation>
  <cl-transformation effect="fade:2000">
  </cl-transformation>
  <cl-transformation effect="boomerang" duration="4">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .AspectRatio("1.0").Height(300).Crop("fill").Chain()
  .Radius("max").Background("red").Chain()
  .Effect("fade:2000").Chain()
  .Effect("boomerang").Duration("4")).BuildVideoTag("ski_jump")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAspectRatio("1.0").setHeight(300).setCrop("fill").chain()
  .setRadius("max").setBackground("red").chain()
  .setEffect("fade:2000").chain()
  .setEffect("boomerang").setDuration("4")).generate("ski_jump.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1.0").height(300).crop("fill").chain()
  .radius("max").background("red").chain()
  .effect("fade:2000").chain()
  .effect("boomerang").duration("4")).resourceType("video").generate("ski_jump.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.

Note
The URL tab above shows the URL as it looks when generated by an SDK. SDKs always generate the parameters within a specific URL component in alphabetical order (thus some qualifiers in the URL may come before the action that they qualify).

In this transformation:

Transformation flags

Transformation flags alter default transformation behavior. In some cases, they alter the default behavior of the transformation URL as a whole. In other cases, they alter the behavior of one or more specific transformation parameters that must be used together in the same URL component.

In general, tens of flags are available that can alter delivery and format, cropping and positioning, overlays, and video-specific behaviors, such as concatenating, streaming, and animation, just to name a few.

For example:

  • fl_attachment alters the normal behavior of the overall transformation. Instead of delivering an asset in a web page, it causes the transformed media file to be downloaded as an attachment. This flag can be used independently of other transformations.

  • fl_relative modifies the way overlay resize parameters are evaluated. This flag can only be used in conjunction with the overlay (l_) parameter.

  • fl_layer_apply tells Cloudinary to apply all chained transformations, until a transformation component that includes this flag, on the last added overlay or underlay asset instead of applying them on the base asset. This flag acts as an indictor to close the layer section of the transformation, similar to a closing bracket. Placement definitions for how the layer should be applied, such as gravity and offsets are also defined in the component with this flag.

For details on all available transformation flags, see the flag section of the Transformation Reference.

Generating secure HTTPS URLs using SDKs

For backward compatibility reasons, many of Cloudinary's earlier SDK major versions generate http URLs by default. When using one of these SDKs, you can instruct the SDK to generate https URLs by setting the secure parameter to true, either globally as part of your SDK configuration, or locally in each transformation operation. For example, delivering the dog video with HTTPS:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("dog", :secure=>true)
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('dog.mp4'));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("secure"=>true))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("dog").video(secure=True)
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("dog", {secure: true})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().secure(true).videoTag("dog");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {secure: true}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("dog", {secure: true})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4");
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="dog" secure="true">

</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="dog" secure="true">

</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="dog" secure="true">

</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Secure(true).BuildVideoTag("dog")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().secure(true).resourceType("video").generate("dog.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4") 
}.generate()

Note
For SDK major versions first released in 2020 or later, the secure parameter is true by default.

Verbose vs non-verbose syntax

Some transformation parameters with multiple options offer two alternative syntaxes for defining the option values:

  • Verbose, unordered: Each option of the transformation (whether required or optional) is specified in the verbose format name_value and each option is separated by a colon (:) or semi-colon (;) depending on the transformation.

    The options can be specified in any order, and you only need to include those that you want (or are required) to define.

    With this syntax, you can also choose to specify only the options for which you don't want to use default values and default values will be applied for the others.

  • Non-verbose, ordered: Transformation options are specified only by values, and must be entered in the pre-defined option order for that transformation. All values from the syntax to the left of the value you want to supply must also be entered.

Transformations that support both verbose and non-verbose URL syntax are indicated as such in the Transformation Reference. When both are supported, SDKs always output the verbose syntax.

Verbose vs non-verbose example

The progressbar effect supports the type, color, and width options, but you can specify them in a different order using verbose syntax. For example:

e_progressbar:width_5:type_frame:color_FF0000.

Additionally, if you only want to change default behavior for the width (last) parameter, you could just specify:

e_progressbar:width_5

However, when using non-verbose syntax, you must specify the parameters in order. Therefore, even if you only want to change the default behavior of the color (second) option, you must still specify the value to use for the type (first) option:

e_progressbar:bar:FF0000

This applies the bar (default) type, your custom color, and also the default width (third option) of 10 pixels.

Chained transformations

Cloudinary supports powerful transformations that are applied on the fly using dynamic URLs. You can combine multiple transformation actions together as part of a single delivery request, e.g., crop a video and then add a border to it.

In general, it's best practice to chain each transformation action in your URL as a separate component in the chain.

To support chained transformations, Cloudinary's transformation URLs allow you to include multiple transformation components, each separated by a slash (/), where each of the transformation components is executed on the result of the previous one. Cloudinary's SDKs can apply multiple transformation components by specifying the transformation parameter and setting it to an array of transformation maps.

For example, crop this video of a ship to a square, using automatic gravity, blur the video, then round the corners to make a circle, giving an out-of-focus telescope effect:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("ship", :transformation=>[
  {:aspect_ratio=>"1:1", :gravity=>"auto", :width=>300, :crop=>"fill"},
  {:effect=>"blur:50"},
  {:radius=>"max"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('ship.mp4'))
  ->resize(Resize::fill()->width(300)
  ->aspectRatio(
  AspectRatio::ar1X1())
  ->gravity(
  Gravity::autoGravity())
  )
  ->effect(Effect::blur()->strength(50))
  ->roundCorners(RoundCorners::max());
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("ship", array("transformation"=>array(
  array("aspect_ratio"=>"1:1", "gravity"=>"auto", "width"=>300, "crop"=>"fill"),
  array("effect"=>"blur:50"),
  array("radius"=>"max")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("ship").video(transformation=[
  {'aspect_ratio': "1:1", 'gravity': "auto", 'width': 300, 'crop': "fill"},
  {'effect': "blur:50"},
  {'radius': "max"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("ship", {transformation: [
  {aspect_ratio: "1:1", gravity: "auto", width: 300, crop: "fill"},
  {effect: "blur:50"},
  {radius: "max"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .aspectRatio("1:1").gravity("auto").width(300).crop("fill").chain()
  .effect("blur:50").chain()
  .radius("max")).videoTag("ship");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('ship', {transformation: [
  {aspectRatio: "1:1", gravity: "auto", width: 300, crop: "fill"},
  {effect: "blur:50"},
  {radius: "max"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("ship", {transformation: [
  {aspect_ratio: "1:1", gravity: "auto", width: 300, crop: "fill"},
  {effect: "blur:50"},
  {radius: "max"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
// This code example is not currently available.
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="ship" >
  <Transformation aspectRatio="1:1" gravity="auto" width="300" crop="fill" />
  <Transformation effect="blur:50" />
  <Transformation radius="max" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="ship" >
  <cld-transformation aspect-ratio="1:1" gravity="auto" width="300" crop="fill" />
  <cld-transformation effect="blur:50" />
  <cld-transformation radius="max" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This code example is not currently available.
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="ship" >
  <cl-transformation aspect-ratio="1:1" gravity="auto" width="300" crop="fill">
  </cl-transformation>
  <cl-transformation effect="blur:50">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .AspectRatio("1:1").Gravity("auto").Width(300).Crop("fill").Chain()
  .Effect("blur:50").Chain()
  .Radius("max")).BuildVideoTag("ship")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAspectRatio("1:1").setGravity("auto").setWidth(300).setCrop("fill").chain()
  .setEffect("blur:50").chain()
  .setRadius("max")).generate("ship.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1:1").gravity("auto").width(300).crop("fill").chain()
  .effect("blur:50").chain()
  .radius("max")).resourceType("video").generate("ship.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.

Named transformations

A named transformation is a pre-defined set of transformation parameters that has been given a custom name for easy reference. Instead of applying each of the required transformations separately to an asset, you can apply a single named transformation to apply all the transformations defined for it. This makes it easy to:

  • Reuse transformations on multiple assets
  • Shorten complex transformation URLs
  • Hide the details of a transformation in your delivery URL.
  • Simplify the enabling/disabling of transformations in Strict Transformations mode.

Named transformations can include other named transformations, which allows you to define a chain of transformations to run on multiple assets more easily.

You can create and manage named transformations via the API or in the console UI.

Named Transformation UI

Once the named transformation has been defined, you can transform an asset with the transformation parameter (t for URLs) and the name of your named transformation. For example t_instagram-auto-crop.

You can include user-defined variables in your named transformations, and then pass the value for the user-defined variable into the transformation from an external source. This enables creating a named transformation 'template' with a lot of flexibility.

For example, you could define a complex named transformation that includes a text overlay as a named transformation, using a user-defined variable for the text string value.

For more details, see user-defined variables. For a use-case example demonstrating named transformations with user-defined variables, see Using variables with named transformations.

Keep in mind that named transformation may be applied to assets by other users and not all asset formats are supported for transformations. If an asset's original format doesn't support transformations, applying a named transformation to it will result in an error. See a list of supported formats.

Note
Updating the transformation definition for a named transformation via the Admin API does not automatically update assets that were already derived/delivered with that named transformation. To apply the new definition to any already derived assets that use that named transformation, you must specifically invalidate those transformations or otherwise modify the other parameters in that delivery URL, so that the asset will be re-derived using the new definition.

However, when updating the transformation definition of a named transformation via the Management Console, if the named transformation is used in fewer than 1000 existing derived assets, those assets are automatically invalidated and will use the new named transformation definition the next time they are requested. If more than 1000 existing derived assets use the named transformation, then existing derived assets are not updated and only newly generated derived assets will use the new definition.

Creating named transformations

You can create a named transformation programmatically or using the Transformations UI in your Cloudinary console:

To create a named transformation programmatically, use the Transformations Admin API method. The following example defines a named transformation called small_profile_thumbnail that uses automatic cropping to resize assets to the required size for a particular application's thumbnail display:

Ruby (cloudinary 1.x):
Copy to clipboard
Cloudinary::Api.create_transformation('small_profile_thumbnail',
  {:width => 100, :height => 150, :crop => :fill, :gravity=>:auto})
PHP (cloudinary_php 2.x):
Copy to clipboard
$api->createTransformation("small_profile_thumbnail",
  [resize(Resize::fill()->width(200)->height(300)->gravity(Gravity::autoGravity()]);
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
$api->create_transformation("small_profile_thumbnail",
  ["width" => 100, "height" => 150, "crop" => "fill", "gravity" =>"auto"]);
Python (cloudinary 1.x):
Copy to clipboard
cloudinary.api.create_transformation("small_profile_thumbnail",
  dict(width = 100, height = 150, crop = "fill", "gravity" = "auto"))
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.v2.api.create_transformation('small_profile_thumbnail',
  { width: 100, height: 150, crop: 'fill', gravity: 'auto' },
  function(error, result) {console.log(result, error); });
Java (cloudinary 1.x):
Copy to clipboard
api.createTransformation("small_profile_thumbnail",
  new Transformation().width(150).height(100).crop("fill").gravity("auto").generate(),
  ObjectUtils.emptyMap());
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
var createTransformParams = new CreateTransformParams(){
  Name = "small_profile_thumbnail",
  Transformation = new Transformation().Width(100).Height(150).Crop("fill").Gravity("auto")};
cloudinary.CreateTransform(createTransformParams);
Go (cloudinary-go 1.x):
Copy to clipboard
resp, err := cld.Admin.CreateTransformation(ctx, admin.CreateTransformationParams{
        Name:         "small_profile_thumbnail",
        Transformation: "c_fill,g_auto,h_150,w_100"})
curl:
Copy to clipboard
curl \
  -d 'transformation=w_100,h_150,c_fill,g_auto' \
  -X POST \
  https://<API_KEY>:<API_SECRET>@api.cloudinary.com/v1_1/<CLOUD_NAME>/transformations/small_profile_thumbnail
cli:
Copy to clipboard
cld admin create_transformation "small_profile_thumbnail" '{"width": 150, "height": 100, "crop": "fill", "gravity": "auto"}'

For more details and examples, see the Create Transformation method in the Admin API Reference.

To create a named transformation using the console, you have a few options:

  1. Start with a cookbook recipe as a template and refine it to your needs before saving it with your chosen name. Cookbook UI
  2. View a list of all your dynamic transformations (those you generated and delivered on the fly) and save one of those with your chosen name.
  3. Create a new transformation from scratch using the transformation editor and save with your chosen name.

Note
Names used for named transformations:

  • Must contain valid UTF8 characters only
  • Must not contain more than 1024 characters
  • Must not contain any of these characters: \, /, ?, &, #, %, ., ,, <, >

Once you've saved your named transformations, you can view a list of them on the Named Transformations page of the console. From here, you can edit, copy, or enable/disable Strict Transformations.

Named transformation examples

Below are some examples of using the following named transformations that have been defined for the Cloudinary demo account:

  • round-if-portrait: If the video's aspect ratio is less than 1 (portrait), round the edges of the video.
  • auto-crop-faces: Fill crop the video to a height of 300 and an aspect ratio of 3:4,automatically centering on faces in the video.
  • logo-overlay: Add a brightened and partially transparent logo to the top right of the video. Scale the logo width to be 20% of the overall video width.

This example delivers the parrot video with rounded corners because it is a portrait shape (aspect ratio less than 1), and also resizes it to a height of 300 pixels.

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("docs/parrot", :transformation=>[
  {:transformation=>["round-if-portrait"]},
  {:height=>300, :crop=>"scale"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('docs/parrot.mp4'))
  ->namedTransformation(NamedTransformation::name("round-if-portrait"))
  ->resize(Resize::scale()->height(300));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("docs/parrot", array("transformation"=>array(
  array("transformation"=>array("round-if-portrait")),
  array("height"=>300, "crop"=>"scale")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("docs/parrot").video(transformation=[
  {'transformation': ["round-if-portrait"]},
  {'height': 300, 'crop': "scale"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("docs/parrot", {transformation: [
  {transformation: ["round-if-portrait"]},
  {height: 300, crop: "scale"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .named("round-if-portrait").chain()
  .height(300).crop("scale")).videoTag("docs/parrot");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("docs/parrot.mp4")
  .namedTransformation(name("round-if-portrait"))
  .resize(scale().height(300));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('docs/parrot', {transformation: [
  {transformation: ["round-if-portrait"]},
  {height: 300, crop: "scale"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("docs/parrot", {transformation: [
  {transformation: ["round-if-portrait"]},
  {height: 300, crop: "scale"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/parrot.mp4")
  .namedTransformation(name("round-if-portrait"))
  .resize(scale().height(300));
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="docs/parrot" >
  <Transformation transformation={["round-if-portrait"]} />
  <Transformation height="300" crop="scale" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="docs/parrot" >
  <cld-transformation transformation={["round-if-portrait"]} />
  <cld-transformation height="300" crop="scale" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/parrot.mp4")
  .namedTransformation(name("round-if-portrait"))
  .resize(scale().height(300));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="docs/parrot" >
  <cl-transformation transformation={{["round-if-portrait"]}}>
  </cl-transformation>
  <cl-transformation height="300" crop="scale">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Named("round-if-portrait").Chain()
  .Height(300).Crop("scale")).BuildVideoTag("docs/parrot")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setNamed("round-if-portrait").chain()
  .setHeight(300).setCrop("scale")).generate("docs/parrot.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .named("round-if-portrait").chain()
  .height(300).crop("scale")).resourceType("video").generate("docs/parrot.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("docs/parrot.mp4")
   namedTransformation(NamedTransformation.name("round-if-portrait"))
   resize(Resize.scale() { height(300) }) 
}.generate()

This example crops this sunglasses ad video to the required aspect ratio while automatically focussing on the face throughout the video:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("docs/sunglasses", :transformation=>[
  {:end_offset=>"6"},
  {:transformation=>["auto-crop-faces"]}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('docs/sunglasses.mp4'))
  ->videoEdit(VideoEdit::trim()->endOffset(6.0))
  ->namedTransformation(NamedTransformation::name("auto-crop-faces"));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("docs/sunglasses", array("transformation"=>array(
  array("end_offset"=>"6"),
  array("transformation"=>array("auto-crop-faces"))
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("docs/sunglasses").video(transformation=[
  {'end_offset': "6"},
  {'transformation': ["auto-crop-faces"]}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("docs/sunglasses", {transformation: [
  {end_offset: "6"},
  {transformation: ["auto-crop-faces"]}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .endOffset("6").chain()
  .named("auto-crop-faces")).videoTag("docs/sunglasses");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("docs/sunglasses.mp4")
  .videoEdit(trim().endOffset("6.0"))
  .namedTransformation(name("auto-crop-faces"));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('docs/sunglasses', {transformation: [
  {endOffset: "6"},
  {transformation: ["auto-crop-faces"]}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("docs/sunglasses", {transformation: [
  {end_offset: "6"},
  {transformation: ["auto-crop-faces"]}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/sunglasses.mp4")
  .videoEdit(trim().endOffset("6.0"))
  .namedTransformation(name("auto-crop-faces"));
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="docs/sunglasses" >
  <Transformation endOffset="6" />
  <Transformation transformation={["auto-crop-faces"]} />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="docs/sunglasses" >
  <cld-transformation end-offset="6" />
  <cld-transformation transformation={["auto-crop-faces"]} />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/sunglasses.mp4")
  .videoEdit(trim().endOffset("6.0"))
  .namedTransformation(name("auto-crop-faces"));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="docs/sunglasses" >
  <cl-transformation end-offset="6">
  </cl-transformation>
  <cl-transformation transformation={{["auto-crop-faces"]}}>
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .EndOffset("6").Chain()
  .Named("auto-crop-faces")).BuildVideoTag("docs/sunglasses")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEndOffset("6").chain()
  .setNamed("auto-crop-faces")).generate("docs/sunglasses.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .endOffset("6").chain()
  .named("auto-crop-faces")).resourceType("video").generate("docs/sunglasses.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("docs/sunglasses.mp4")
   videoEdit(VideoEdit.trim() { endOffset(6.0F) })
   namedTransformation(NamedTransformation.name("auto-crop-faces")) 
}.generate()

This example adds a semi-transparent Cloudinary logo to the top right corner of the video:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("docs/sunset_waves", :transformation=>[
  {:transformation=>["logo-overlay"]},
  {:height=>300, :crop=>"scale"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('docs/sunset_waves.mp4'))
  ->namedTransformation(NamedTransformation::name("logo-overlay"))
  ->resize(Resize::scale()->height(300));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("docs/sunset_waves", array("transformation"=>array(
  array("transformation"=>array("logo-overlay")),
  array("height"=>300, "crop"=>"scale")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("docs/sunset_waves").video(transformation=[
  {'transformation': ["logo-overlay"]},
  {'height': 300, 'crop': "scale"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("docs/sunset_waves", {transformation: [
  {transformation: ["logo-overlay"]},
  {height: 300, crop: "scale"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .named("logo-overlay").chain()
  .height(300).crop("scale")).videoTag("docs/sunset_waves");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("docs/sunset_waves.mp4")
  .namedTransformation(name("logo-overlay"))
  .resize(scale().height(300));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('docs/sunset_waves', {transformation: [
  {transformation: ["logo-overlay"]},
  {height: 300, crop: "scale"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("docs/sunset_waves", {transformation: [
  {transformation: ["logo-overlay"]},
  {height: 300, crop: "scale"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/sunset_waves.mp4")
  .namedTransformation(name("logo-overlay"))
  .resize(scale().height(300));
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="docs/sunset_waves" >
  <Transformation transformation={["logo-overlay"]} />
  <Transformation height="300" crop="scale" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="docs/sunset_waves" >
  <cld-transformation transformation={["logo-overlay"]} />
  <cld-transformation height="300" crop="scale" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/sunset_waves.mp4")
  .namedTransformation(name("logo-overlay"))
  .resize(scale().height(300));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="docs/sunset_waves" >
  <cl-transformation transformation={{["logo-overlay"]}}>
  </cl-transformation>
  <cl-transformation height="300" crop="scale">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Named("logo-overlay").Chain()
  .Height(300).Crop("scale")).BuildVideoTag("docs/sunset_waves")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setNamed("logo-overlay").chain()
  .setHeight(300).setCrop("scale")).generate("docs/sunset_waves.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .named("logo-overlay").chain()
  .height(300).crop("scale")).resourceType("video").generate("docs/sunset_waves.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("docs/sunset_waves.mp4")
   namedTransformation(NamedTransformation.name("logo-overlay"))
   resize(Resize.scale() { height(300) }) 
}.generate()

Chaining named transformations

You can also chain multiple named transformations. For example, to chain the three named transformations we defined above (along with an additional transformation to shorten the video duration):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("docs/green_screen_queen", :resource_type=>"video", :transformation=>[
  {:transformation=>["auto-crop-faces"]},
  {:transformation=>["round-if-portrait"]},
  {:transformation=>["logo-overlay"]},
  {:duration=>"10"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('docs/green_screen_queen'))
  ->namedTransformation(NamedTransformation::name("auto-crop-faces"))
  ->namedTransformation(NamedTransformation::name("round-if-portrait"))
  ->namedTransformation(NamedTransformation::name("logo-overlay"))
  ->videoEdit(VideoEdit::trim()->duration(10.0));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/green_screen_queen", array("resource_type"=>"video", "transformation"=>array(
  array("transformation"=>array("auto-crop-faces")),
  array("transformation"=>array("round-if-portrait")),
  array("transformation"=>array("logo-overlay")),
  array("duration"=>"10")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("docs/green_screen_queen").image(transformation=[
  {'transformation': ["auto-crop-faces"]},
  {'transformation': ["round-if-portrait"]},
  {'transformation': ["logo-overlay"]},
  {'duration': "10"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("docs/green_screen_queen", {resource_type: "video", transformation: [
  {transformation: ["auto-crop-faces"]},
  {transformation: ["round-if-portrait"]},
  {transformation: ["logo-overlay"]},
  {duration: "10"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .named("auto-crop-faces").chain()
  .named("round-if-portrait").chain()
  .named("logo-overlay").chain()
  .duration("10")).resourceType("video").imageTag("docs/green_screen_queen");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("docs/green_screen_queen")
  .namedTransformation(name("auto-crop-faces"))
  .namedTransformation(name("round-if-portrait"))
  .namedTransformation(name("logo-overlay"))
  .videoEdit(trim().duration("10.0"));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('docs/green_screen_queen', {transformation: [
  {transformation: ["auto-crop-faces"]},
  {transformation: ["round-if-portrait"]},
  {transformation: ["logo-overlay"]},
  {duration: "10"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("docs/green_screen_queen", {resource_type: "video", transformation: [
  {transformation: ["auto-crop-faces"]},
  {transformation: ["round-if-portrait"]},
  {transformation: ["logo-overlay"]},
  {duration: "10"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/green_screen_queen")
  .namedTransformation(name("auto-crop-faces"))
  .namedTransformation(name("round-if-portrait"))
  .namedTransformation(name("logo-overlay"))
  .videoEdit(trim().duration("10.0"));
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="docs/green_screen_queen" resourceType="video">
  <Transformation transformation={["auto-crop-faces"]} />
  <Transformation transformation={["round-if-portrait"]} />
  <Transformation transformation={["logo-overlay"]} />
  <Transformation duration="10" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="docs/green_screen_queen" resource-type="video">
  <cld-transformation transformation={["auto-crop-faces"]} />
  <cld-transformation transformation={["round-if-portrait"]} />
  <cld-transformation transformation={["logo-overlay"]} />
  <cld-transformation duration="10" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/green_screen_queen")
  .namedTransformation(name("auto-crop-faces"))
  .namedTransformation(name("round-if-portrait"))
  .namedTransformation(name("logo-overlay"))
  .videoEdit(trim().duration("10.0"));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="docs/green_screen_queen" resource-type="video">
  <cl-transformation transformation={{["auto-crop-faces"]}}>
  </cl-transformation>
  <cl-transformation transformation={{["round-if-portrait"]}}>
  </cl-transformation>
  <cl-transformation transformation={{["logo-overlay"]}}>
  </cl-transformation>
  <cl-transformation duration="10">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Named("auto-crop-faces").Chain()
  .Named("round-if-portrait").Chain()
  .Named("logo-overlay").Chain()
  .Duration("10")).BuildImageTag("docs/green_screen_queen")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setNamed("auto-crop-faces").chain()
  .setNamed("round-if-portrait").chain()
  .setNamed("logo-overlay").chain()
  .setDuration("10")).generate("docs/green_screen_queen")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .named("auto-crop-faces").chain()
  .named("round-if-portrait").chain()
  .named("logo-overlay").chain()
  .duration("10")).resourceType("video").generate("docs/green_screen_queen");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("docs/green_screen_queen")
   namedTransformation(NamedTransformation.name("auto-crop-faces"))
   namedTransformation(NamedTransformation.name("round-if-portrait"))
   namedTransformation(NamedTransformation.name("logo-overlay"))
   videoEdit(VideoEdit.trim() { duration(10.0F) }) 
}.generate()

Chaining transformations can create long URLs, so instead you could define a named transformation that includes a chain of other transformations, including other named transformations. For example, we can create a named transformation that is a composite of the three named transformations described above. It is now simple to specify a single named transformation instead:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("docs/green_screen_queen", :resource_type=>"video", :transformation=>[
  {:transformation=>["demo-combined-video"]},
  {:duration=>"10"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('docs/green_screen_queen'))
  ->namedTransformation(NamedTransformation::name("demo-combined-video"))
  ->videoEdit(VideoEdit::trim()->duration(10.0));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/green_screen_queen", array("resource_type"=>"video", "transformation"=>array(
  array("transformation"=>array("demo-combined-video")),
  array("duration"=>"10")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("docs/green_screen_queen").image(transformation=[
  {'transformation': ["demo-combined-video"]},
  {'duration': "10"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("docs/green_screen_queen", {resource_type: "video", transformation: [
  {transformation: ["demo-combined-video"]},
  {duration: "10"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .named("demo-combined-video").chain()
  .duration("10")).resourceType("video").imageTag("docs/green_screen_queen");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("docs/green_screen_queen")
  .namedTransformation(name("demo-combined-video"))
  .videoEdit(trim().duration("10.0"));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('docs/green_screen_queen', {transformation: [
  {transformation: ["demo-combined-video"]},
  {duration: "10"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("docs/green_screen_queen", {resource_type: "video", transformation: [
  {transformation: ["demo-combined-video"]},
  {duration: "10"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/green_screen_queen")
  .namedTransformation(name("demo-combined-video"))
  .videoEdit(trim().duration("10.0"));
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="docs/green_screen_queen" resourceType="video">
  <Transformation transformation={["demo-combined-video"]} />
  <Transformation duration="10" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="docs/green_screen_queen" resource-type="video">
  <cld-transformation transformation={["demo-combined-video"]} />
  <cld-transformation duration="10" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/green_screen_queen")
  .namedTransformation(name("demo-combined-video"))
  .videoEdit(trim().duration("10.0"));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="docs/green_screen_queen" resource-type="video">
  <cl-transformation transformation={{["demo-combined-video"]}}>
  </cl-transformation>
  <cl-transformation duration="10">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Named("demo-combined-video").Chain()
  .Duration("10")).BuildImageTag("docs/green_screen_queen")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setNamed("demo-combined-video").chain()
  .setDuration("10")).generate("docs/green_screen_queen")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .named("demo-combined-video").chain()
  .duration("10")).resourceType("video").generate("docs/green_screen_queen");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("docs/green_screen_queen")
   namedTransformation(NamedTransformation.name("demo-combined-video"))
   videoEdit(VideoEdit.trim() { duration(10.0F) }) 
}.generate()

Where t_demo-combined-video is defined as: t_auto-crop-faces/t_round-if-portrait/t_logo-overlay.

Embedding videos in web pages using SDKs

You access uploaded videos or their derived transformations with URLs. These URLs can be used as the <src> of the <video> tags in your HTML code or other frontend functions to deliver your media assets.

But the easiest way to deliver them is using Cloudinary’s framework SDKs to automatically generate transformation URLs and embed them using HTML video tags. The SDKs offer two main helper methods: the URL helper and the video tag helper.

Cloudinary URL helper method

The Cloudinary URL helper method (e.g., cloudinary_url in Ruby on Rails) automatically generates the video source URL itself. For example, using the URL helper method to return the URL of the dog video, padded to a scaled width and height of 300 pixels with a blue background for the padding:

Ruby (cloudinary 1.x):
Copy to clipboard
cloudinary_url("dog.mp4", :background=>"blue", :height=>300, :width=>300, :crop=>"pad", :resource_type=>"video")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::pad()->width(300)
->height(300)
  ->background(
  Background::color(Color::BLUE))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
Cloudinary::cloudinary_url("dog.mp4", array("background"=>"blue", "height"=>300, "width"=>300, "crop"=>"pad", "resource_type"=>"video"))
Python (cloudinary 1.x):
Copy to clipboard
cloudinary.utils.cloudinary_url("dog.mp4", background="blue", height=300, width=300, crop="pad", resource_type="video")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.url("dog.mp4", {background: "blue", height: 300, width: 300, crop: "pad", resource_type: "video"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().background("blue").height(300).width(300).crop("pad")).resourceType("video").generate("dog.mp4")
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(
  pad()
    .width(300)
    .height(300)
    .background(color("blue"))
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.url('dog.mp4', {background: "blue", height: 300, width: 300, crop: "pad"}, {resource_type: 'video'});
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.url("dog.mp4", {background: "blue", height: 300, width: 300, crop: "pad", resource_type: "video"})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4").resize(
  pad()
    .width(300)
    .height(300)
    .background(color("blue"))
);
React (cloudinary-react 1.x):
Copy to clipboard
cloudinary.url('dog.mp4', {background: "blue", height: 300, width: 300, crop: "pad"}, {resource_type: 'video'});
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
cloudinary.url('dog.mp4', {background: "blue", height: 300, width: 300, crop: "pad"}, {resource_type: 'video'});
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4").resize(
  pad()
    .width(300)
    .height(300)
    .background(color("blue"))
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
cloudinary.url('dog.mp4', {background: "blue", height: 300, width: 300, crop: "pad"}, {resource_type: 'video'});
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background("blue").Height(300).Width(300).Crop("pad")).BuildUrl("dog.mp4")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBackground("blue").setHeight(300).setWidth(300).setCrop("pad")).generate("dog.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().background("blue").height(300).width(300).crop("pad")).resourceType("video").generate("dog.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.pad() { width(300)
 height(300)
   background(
  Background.color(Color.BLUE))
   }) 
}.generate()

This SDK code outputs the URL:

Cloudinary video tag helper method

By default, the Cloudinary video tag helper method (e.g., cl_video_tag in Ruby on Rails) automatically generates an HTML video tag including the video source URL in WEBM, MP4, and OGG formats, as well as an automatically generated poster based on the center frame of the video.

The following shows the same transformations as above, but this time using the video tag to generate a complete HTML video tag.

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("dog", :background=>"blue", :height=>300, :width=>300, :crop=>"pad")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::pad()->width(300)
->height(300)
  ->background(
  Background::color(Color::BLUE))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("background"=>"blue", "height"=>300, "width"=>300, "crop"=>"pad"))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("dog").video(background="blue", height=300, width=300, crop="pad")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("dog", {background: "blue", height: 300, width: 300, crop: "pad"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().background("blue").height(300).width(300).crop("pad")).videoTag("dog");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(
  pad()
    .width(300)
    .height(300)
    .background(color("blue"))
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {background: "blue", height: 300, width: 300, crop: "pad"}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("dog", {background: "blue", height: 300, width: 300, crop: "pad"})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4").resize(
  pad()
    .width(300)
    .height(300)
    .background(color("blue"))
);
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="dog" >
  <Transformation background="blue" height="300" width="300" crop="pad" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation background="blue" height="300" width="300" crop="pad" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4").resize(
  pad()
    .width(300)
    .height(300)
    .background(color("blue"))
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation background="blue" height="300" width="300" crop="pad">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background("blue").Height(300).Width(300).Crop("pad")).BuildVideoTag("dog")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBackground("blue").setHeight(300).setWidth(300).setCrop("pad")).generate("dog.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().background("blue").height(300).width(300).crop("pad")).resourceType("video").generate("dog.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.pad() { width(300)
 height(300)
   background(
  Background.color(Color.BLUE))
   }) 
}.generate()

This SDK code will output the following HTML code:

Copy to clipboard
<video 
    poster="https://res.cloudinary.com/demo/video/upload/b_blue,c_pad,h_300,w_300/dog.jpg">
    <source src="https://res.cloudinary.com/demo/video/upload/b_blue,c_pad,h_300,w_300/dog.webm"
        type="video/webm">
    <source src="https://res.cloudinary.com/demo/video/upload/b_blue,c_pad,h_300,w_300/dog.mp4" 
        type="video/mp4">
    <source src="https://res.cloudinary.com/demo/video/upload/b_blue,c_pad,h_300,w_300/dog.ogv"
        type="video/ogg">
</video>

In addition to passing Cloudinary transformations parameters, the video tag helper also supports the following special options (naming may differ slightly for different SDKs), plus the option to pass any standard HTML5 video tag attributes (e.g., mute, controls, etc):

  • source_types: an ordered array of the video source types to include in the HTML5 tag, where the type is mapped to the mime type. Default: ['webm', 'mp4', 'ogv']
    • source_transformation: to override the default transformation instructions for each specific video format. The source_type is mapped to a transformation struct. e.g., { mp4: { quality: 70}}
  • sources: an ordered array of video source types, codecs and transformations to include in the HTML5 tag, where the type is mapped to the mime type. For example:

    Copy to clipboard
    [
      [
        "type"            => "mp4",
        "codecs"          => "hev1",
        "transformations" => ["video_codec" => "h265"]
      ],
      [
        "type"            => "webm",
        "codecs"          => "vp9",
        "transformations" => ["video_codec" => "vp9"]
      ],
      [
        "type"            => "mp4",
        "transformations" => ["video_codec" => "auto"]
      ],
      [
        "type"            => "webm",
        "transformations" => ["video_codec" => "auto"]
      ],
    ]

    would produce the following video tag:

    Copy to clipboard
    <video poster="http://res.cloudinary.com/demo/video/upload/dog.jpg">
      <source src="http://res.cloudinary.com/demo/video/upload/vc_h265/dog.mp4" type="video/mp4; codecs=hev1">
      <source src="http://res.cloudinary.com/demo/video/upload/vc_vp9/dog.webm" type="video/webm; codecs=vp9">
      <source src="http://res.cloudinary.com/demo/video/upload/vc_auto/dog.mp4" type="video/mp4">
      <source src="http://res.cloudinary.com/demo/video/upload/vc_auto/dog.webm" type="video/webm">
    </video>

    If omitted, the source_types parameter is used. If both are specified, the source_types parameter is ignored.

  • poster: a URI to an image to be shown while the video is downloading or until the user hits the play button. The URI can be one of the following:

    • The URL to an image, including any transformed Cloudinary image.
    • Set to nil or false to use no poster.
    • Default: the middle frame of the source video in jpg format.
  • fallback_content: an HTML string to display in the case that the browser does not support any of the video formats included.

  • Any attribute of the HTML5 video tag. e.g., autoplay, controls, height, loop, muted, preload (see w3schools for details on HTML5 attributes).

The example below creates an HTML5 video tag for the uploaded mp4 video named dog, where the video is cropped to a width of 200 pixels and a height of 150 pixels, given a fallback string in the case that the video tag is not supported, set not to include controls, not to preload, not to use a poster image, and for the video to autoplay in a loop:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("dog", :width => 200, :height => 150, :crop => :crop, 
  :preload => "none", :controls => true, 
  :loop => true, :autoplay => true, :poster => false,
  :fallback_content => "Your browser does not support HTML5 video tags" )
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('dog'))
  ->resize(Resize::crop()->width(200)
  ->fallback('Your browser does not support HTML5 video tags.')
  ->setAttributes(['preload': 'none', 'controls':true, 'loop':true, 'autoplay':true, 'poster':false]);
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", 
  ["width" => 200, "height" => 150, "crop" => "crop", 
    "preload" => "none", "controls" => true,
    "loop" => true, "autoplay" => true, "poster" => false,
    "fallback_content" => "Your browser does not support HTML5 video tags"]);
Python (cloudinary 1.x):
Copy to clipboard
cloudinary.CloudinaryVideo("dog").video( 
  width = 200, height = 150, crop = "crop", 
  loop = True, autoplay = True, poster = False,
  fallback_content = "Your browser does not support HTML5 video tags")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("dog" { width: 200, height: 150, crop: "crop", 
  loop: true, autoplay: true, poster: false,
  fallback_content: "Your browser does not support HTML5 video tags" })
Java (cloudinary 1.x):
Copy to clipboard
<cl:video src="dog" width = "200", height = "150", crop = "crop", 
  loop = "true", autoplay = "true", poster = "false",
  fallback_content = "Your browser does not support HTML5 video tags"/>
Go (cloudinary-go 1.x):
Copy to clipboard
Not supported by this SDK

This SDK code generates the following HTML5 video tag:

Copy to clipboard
<video loop autoplay preload="none" controls>
  <source src="https://res.cloudinary.com/demo/video/upload/c_crop,h_150,w_200/dog.webm" type="video/webm"/>
  <source src="https://res.cloudinary.com/demo/video/upload/c_crop,h_150,w_200/dog.mp4" type="video/mp4"/>
  <source src="https://res.cloudinary.com/demo/video/upload/c_crop,h_150,w_200/dog.ogv" type="video/ogg"/>
   Your browser does not support HTML5 video tags
</video>

For more information on these SDK helper methods, see the transformation documentation in the relevant SDK guide.

Tip

In general, when using an SDK, you will probably take advantage of the SDK parameter names for improved readability and maintenance of your code. However, you can also optionally pass a raw transformation parameter, whose value is a literal URL transformation definition. Note that the string you pass as the raw transformation value will be appended as is (with no processing or validation) to the end of any other transformation parameters passed in the same component of the transformation chain.

For example:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("dog", 
  :transformation=>[{:raw_transformation=> "c_pad,w_400"}])
PHP (cloudinary_php 2.x):
Copy to clipboard
VideoTag::fromParams("dog", 
  ["raw_transformation" => "c_pad,w_400"]);
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", 
  ["raw_transformation" => "c_pad,w_400"]);
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("dog").video(
  transformation=[{"raw_transformation":"c_pad,w_400"}])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("dog", { transformation: { raw_transformation: "c_pad,w_400" }})
Java (cloudinary 1.x):
Copy to clipboard
<cl:video src="dog" raw_transformation="c_pad,w_400"/>
Go (cloudinary-go 1.x):
Copy to clipboard
myVideo, err := cld.Video("dog")
myVideo.Transformation = "c_pad,w_400"
url, err := myVideo.String()

Transcoding videos to other formats

Videos (and audio files) can be uploaded to Cloudinary in various formats (upload formats). You can transcode these videos to other formats for displaying in your web site or application (delivery formats). Examples of situations where you might want to change the delivered video format:

  • Delivering a video where the original format is not supported for delivery by the browser. For example, you could deliver a 3PG (.3pg) video as an MPEG-4 (.mp4).
  • Delivering WebM if your users are on a Chrome browser or on a mobile app you control.

Tip
For video format optimization guidelines, see How to optimize video format.

Delivering in a different format

You can transcode and deliver videos in a different format by specifying the required format as the file extension of the delivery URL. You can also convert a video to an audio file by specifying a supported audio format.

When using an SDK to build the URL, you can either append the extension of the new format to the asset's public ID or use the format parameter.

For example, the following example transcodes the uploaded mp4 video with the Public ID, dog to WebM format by changing the file extension to .webm:

As a URL:

Via our SDKs:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("dog.webm")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('dog.webm'));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("dog.webm")
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("dog.webm").video()
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("dog.webm")
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().videoTag("dog.webm");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog.webm').toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("dog.webm")
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="dog.webm" >
</Video>
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="dog.webm" >
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog.webm")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.webm")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("dog.webm");
Go (cloudinary-go 1.x):
Copy to clipboard
myVideo, err := cld.Video("dog")
myVideo.Transformation = "f_webm"
url, err := myVideo.String()

Another way to transcode the format of an uploaded video is to use the fetch_format transformation parameter (f for URLs). For example, transcoding the uploaded mp4 video named dog to WebM with a parameter:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("dog", :fetch_format=>"webm")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->delivery(Delivery::format(
  Format::videoWebm()));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("fetch_format"=>"webm"))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("dog").video(fetch_format="webm")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("dog", {fetch_format: "webm"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().fetchFormat("webm")).videoTag("dog");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").delivery(format(videoWebm()));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {fetchFormat: "webm"}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("dog", {fetch_format: "webm"})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4").delivery(format(videoWebm()));
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="dog" >
  <Transformation fetchFormat="webm" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation fetch-format="webm" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("dog.mp4").delivery(format(videoWebm()));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation fetch-format="webm">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().FetchFormat("webm")).BuildVideoTag("dog")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setFetchFormat("webm")).generate("dog.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().fetchFormat("webm")).resourceType("video").generate("dog.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   delivery(Delivery.format(
  Format.videoWebm())) 
}.generate()

Notes

  • If the file extension is omitted in a delivery URL, the file is delivered in the originally uploaded format unless a specific format (or the auto format is requested using the fetch_format (f_) transformation parameter).
  • SDK major versions with initial release later than January 2020 have a format transformation parameter, instead of the fetch_format parameter. See f (format) in the transformation reference.

f_auto

You can take advantage of Cloudinary's automatic format selection (f_auto) transformation to automatically deliver videos in the most optimized format that's supported by the requesting browser.

For example, if you deliver an MP4 video with f_auto, Cloudinary might generate and deliver the video as a VP9-encoded WebM, an HEVC-encoded MP4, or an H.264-encoded MP4, depending on the requesting browser and your account settings.

For details, see Automatic format_selection (f_auto).

Video codec settings

The video_codec parameter (vc in URLs) is used to determine the video codec, video profile and level to use in the form <codec>[:<profile>[:<level>]] e.g. vc_h264:baseline:3.1 or vc_h264 or vc_h264:high. You can set this parameter to auto instead, to normalize and optimize the video for web (including audio settings).

By default, any transformation applied to the video (e.g., resizing) implicitly also uses the auto settings when delivering the transformed video, so using the auto codec setting is only needed when delivering the same format as originally uploaded but without any additional transformations. See vc (video_codec) in the Transformation URL API Reference for the default settings for each format.

Examples with the uploaded mp4 video named dog:

  1. Setting the video codec to h264, the profile to baseline and the level to 3.1:

    Ruby (cloudinary 1.x):
    Copy to clipboard
    cl_video_tag("dog", :video_codec=>"h264:baseline:3.1")
    PHP (cloudinary_php 2.x):
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->transcode(Transcode::videoCodec(
      VideoCodec::h264()
      ->profile(
      VideoCodecProfile::baseline())
      ->level(
      VideoCodecLevel::vcl31())
      ));
    PHP (cloudinary_php 1.x (legacy)):
    Copy to clipboard
    cl_video_tag("dog", array("video_codec"=>"h264:baseline:3.1"))
    Python (cloudinary 1.x):
    Copy to clipboard
    CloudinaryVideo("dog").video(video_codec="h264:baseline:3.1")
    Node.js (cloudinary 1.x):
    Copy to clipboard
    cloudinary.video("dog", {video_codec: "h264:baseline:3.1"})
    Java (cloudinary 1.x):
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().videoCodec("h264:baseline:3.1")).videoTag("dog");
    JS (@cloudinary/url-gen 1.x):
    Copy to clipboard
    // This code example is not currently available.
    JS (cloudinary-core 2.x (legacy)):
    Copy to clipboard
    cloudinary.videoTag('dog', {videoCodec: "h264:baseline:3.1"}).toHtml();
    jQuery (cloudinary-jquery 2.x):
    Copy to clipboard
    $.cloudinary.video("dog", {video_codec: "h264:baseline:3.1"})
    React (@cloudinary/react 1.x):
    Copy to clipboard
    // This code example is not currently available.
    React (cloudinary-react 1.x):
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation videoCodec="h264:baseline:3.1" />
    </Video>
    Vue.js (cloudinary-vue 1.x):
    Copy to clipboard
    <cld-video public-id="dog" >
      <cld-transformation video-codec="h264:baseline:3.1" />
    </cld-video>
    Angular (@cloudinary/ng 1.x):
    Copy to clipboard
    // This code example is not currently available.
    Angular (@cloudinary/angular-5.x 1.x (legacy)):
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation video-codec="h264:baseline:3.1">
      </cl-transformation>
    </cl-video>
    .NET (CloudinaryDotNet 1.x):
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().VideoCodec("h264:baseline:3.1")).BuildVideoTag("dog")
    iOS (cloudinary 3.x):
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setVideoCodec("h264:baseline:3.1")).generate("dog.mp4")
    Android (cloudinary-android 1.x):
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().videoCodec("h264:baseline:3.1")).resourceType("video").generate("dog.mp4");
    Kotlin (kotlin-url-gen 1.x):
    Copy to clipboard
    // This code example is not currently available.

  2. Normalizing the video for web with the default settings:

    Ruby (cloudinary 1.x):
    Copy to clipboard
    cl_video_tag("dog", :video_codec=>"auto")
    PHP (cloudinary_php 2.x):
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->transcode(Transcode::videoCodec(
      VideoCodec::auto()));
    PHP (cloudinary_php 1.x (legacy)):
    Copy to clipboard
    cl_video_tag("dog", array("video_codec"=>"auto"))
    Python (cloudinary 1.x):
    Copy to clipboard
    CloudinaryVideo("dog").video(video_codec="auto")
    Node.js (cloudinary 1.x):
    Copy to clipboard
    cloudinary.video("dog", {video_codec: "auto"})
    Java (cloudinary 1.x):
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().videoCodec("auto")).videoTag("dog");
    JS (@cloudinary/url-gen 1.x):
    Copy to clipboard
    // This code example is not currently available.
    JS (cloudinary-core 2.x (legacy)):
    Copy to clipboard
    cloudinary.videoTag('dog', {videoCodec: "auto"}).toHtml();
    jQuery (cloudinary-jquery 2.x):
    Copy to clipboard
    $.cloudinary.video("dog", {video_codec: "auto"})
    React (@cloudinary/react 1.x):
    Copy to clipboard
    // This code example is not currently available.
    React (cloudinary-react 1.x):
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation videoCodec="auto" />
    </Video>
    Vue.js (cloudinary-vue 1.x):
    Copy to clipboard
    <cld-video public-id="dog" >
      <cld-transformation video-codec="auto" />
    </cld-video>
    Angular (@cloudinary/ng 1.x):
    Copy to clipboard
    // This code example is not currently available.
    Angular (@cloudinary/angular-5.x 1.x (legacy)):
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation video-codec="auto">
      </cl-transformation>
    </cl-video>
    .NET (CloudinaryDotNet 1.x):
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().VideoCodec("auto")).BuildVideoTag("dog")
    iOS (cloudinary 3.x):
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setVideoCodec("auto")).generate("dog.mp4")
    Android (cloudinary-android 1.x):
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().videoCodec("auto")).resourceType("video").generate("dog.mp4");
    Kotlin (kotlin-url-gen 1.x):
    Copy to clipboard
    // This code example is not currently available.

Notes

  • Supported for: vp9, prores, h264 or h265. Only the h264 codec (mp4) has profile or level parameters, with profile: baseline, main or high and level: 3.0,3.1,4.0,4.1, 4.2, 5.0, 5.1 or 5.2.
  • The prores parameter value delivers videos encoded with the Apple ProRes 422HQ codec.
  • Client libraries can optionally enter the parameter as a structure. For example, in Ruby: video_codec: { codec: 'h264', profile: 'baseline', level: '3.1' }

Supported video formats

The table below summarizes the supported video formats.

See also: supported audio formats.

Format Extensions Supported for Upload1 Supported for Delivery Default Codec
3G2 3g2 Yes
3GP (3rd Generation Partnership) 3gp Yes
AVI (Audio Video Interleave) avi Yes
FLV (Flash Video) flv Yes Yes
HLS adaptive streaming m3u8 Yes (as raw file only) Yes 2 Defined by streaming profile
MPEG-2 Transport Stream ts, m2ts, mts Yes Yes Defined by streaming profile
MOV mov Yes Yes h264
MKV (Matroska Multimedia Container) mkv Yes Yes
MP4 mp4 Yes Yes h264
MPEG-2 mpeg Yes
MPEG-DASH adaptive streaming mpd Yes (as raw file only) Yes 2 Defined by streaming profile
MXF (Material eXchange Format) mxf Yes
OGV (Ogg Video) ogv Yes Yes
WebM webm Yes Yes VP9
WMV (Windows Media Video) wmv Yes VP9 3

Footnotes

  1. If a format is only supported for upload, then the delivery URL enables a user to download the original file in its original format, but you cannot apply transformation parameters. If you want to apply transformations, you can transcode the video to a different format for delivery.
  2. For adaptive streaming manifest files (m3u8 and mpd), only those generated using Cloudinary can be used for delivery. See Adaptive Bitrate streaming for more information.
  3. The default codec for WebM is VP9. For older accounts the default is VP8. Submit a support request to change this default.

Video transformation types

This page walked you through the basics of how video transformations work. The rest of the pages in this guide provide details, use cases and examples of the many different types of transformations you can apply to the videos you deliver:

Transformation type Description
Resizing and cropping Resize (crop and/or scale) videos server-side before delivering them, including controlling which area of the video to keep when cropping or allowing Cloudinary to automatically crop your video to the requested dimensions while always keeping the main video subject in focus (g_auto).
Trimming and concatenating Trim from the start and/or end of a video, or combine (concatenate) two or more videos.
Placing layers on videos Place video, image, audio, text, or subtitle layers on a base video asset to generate new and customized creations on the fly.
Effects and enhancements Apply a huge variety of effects and other visual or audio enhancements to a video.
Adaptive bitrate streaming Automatically generate and deliver all files required to deliver a video in HLS and/or MPEG-DASH adaptive bitrate streaming formats.
Converting videos to animated images Convert videos to animated GIFs or WEBP files.
Audio transformations Stream audio from any audio or video file in your account, adjust audio settings, or generate audio waveform images from any audio or video file.
Conditional transformations Apply a transformation to a video only if a specified condition is met.
User-defined variables and arithmetic transformations Use arithmetic expressions and variables to add additional sophistication and flexibility to your video transformations.
Live streaming (Beta) Try Cloudinary's end-to-end live video streaming solution supporting both WebRTC and RTMP and outputting using adaptive bitrate streaming.
Video slideshow generation (Beta) Combine assets to create auto-generated video slideshows. Build up your slideshows using videos and images and select how you want to transition between each.

Delivering optimized videos

In addition to changing the appearance of your media assets by transforming them, you can also use Cloudinary URLs and a variety of parameters to control how they are delivered:

Topic Description
Optimizations Deliver your media assets in the optimal format, with the smallest possible file size while maintaining visual quality, saving bandwidth and improving performance for your website, including automatic quality selection (q_auto) and automatic format selection (f_auto).
Auto-upload remote videos Upload videos from a remote location to your Cloudinary account 'lazily' by mapping between remote locations and Cloudinary folders, such that each asset gets uploaded only when requested for delivery.
Access control Control who can access your media, both the originals and transformed assets, including enabling strict transformations, using signed delivery URLs, uploading videos as private or authenticated, and using access_control or access_mode to control who can access an asset without adjusting the URL.
Advanced URL delivery options Take advantage of advanced options that make your URLs more SEO-friendly, deliver assets using private CDNs or multi-CDN solutions, use custom domain names (CNames) for your URLs, define custom favicons, work with asset versions, and more.

Related topics
While learning about transformations, you may also want to check out:

✔️ Feedback sent!

Rate this page: