Video manipulation and delivery

 

Cloudinary is a cloud-based service that provides an end-to-end media management solution for images and videos, including upload, storage, administration, manipulation, optimization and delivery.

Using Cloudinary's comprehensive API and easy to use manipulation URLs, uploaded videos can be automatically converted to all relevant formats suitable for web viewing, optimized for web browsers and mobile devices, normalized and manipulated in real time to fit your graphic design. The videos can be easily embedded in your website using HTML5 video tags (or Flash) and then streamed to your users via a fast CDN (see the Upload videos documentation for more information on uploading videos).

Cloudinary’s video management service enables simple video delivery and advanced video manipulation as follows:

The Reference table at the bottom of this page summarizes all parameters available for manipulating videos.

On-the-fly video encoding and delivery

You deliver video using Cloudinary HTTP or HTTPS URLs. You can add transformations to any Cloudinary URL and deliver your video, encoded to the specified format, on-the-fly. Multiple users can then stream the 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.

Video URL structure

Ths Public ID is the unique identifier of the video, and is either specified when uploading the video to your Cloudinary account, or automatically assigned by Cloudinary. For more details on the options for specifying the public ID, see Public ID - the image identifier.

The video delivery URL takes the following structure:

http://res.cloudinary.com/<cloud name>/video/upload/<public ID>.<video format file extension>

Note: For customers with a Custom Domain Name (CNAME - available for Cloudinary's Advanced plan and above), the video delivery URL becomes:

http://<custom domain name>/video/upload/<public ID>.<video format file extension>

For example, here's how you would deliver a video from Cloudinary’s demo account with a public ID of dog in mp4 format:

Ruby:
cl_video_tag("dog")
PHP:
cl_video_tag("dog")
Python:
CloudinaryVideo("dog").video()
Node.js:
cloudinary.video("dog")
Java:
cloudinary.url().videoTag("dog")
JS:
cl.videoTag('dog').toHtml();
jQuery:
$.cloudinary.video("dog")
React:
<Video publicId="dog" >

</Video>
Angular:
<cl-video public-id="dog" >

</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")

Manipulation (transformation) instructions are added in the delivery URL before the public ID. The video delivery URL with transformation parameters takes the following structure:

http://res.cloudinary.com/<cloud name>/video/upload/<manipulation parameters>/<public ID>.<video format file extension>

For details on available transformations, see the Video transformations reference table.

An example of a URL with video manipulation, where dog video is cropped to a width of 300 pixels and a height of 200 pixels, and encoded to mp4 format:

Ruby:
cl_video_tag("dog", :width=>300, :height=>200, :crop=>"crop")
PHP:
cl_video_tag("dog", array("width"=>300, "height"=>200, "crop"=>"crop"))
Python:
CloudinaryVideo("dog").video(width=300, height=200, crop="crop")
Node.js:
cloudinary.video("dog", {width: 300, height: 200, crop: "crop"})
Java:
cloudinary.url().transformation(new Transformation().width(300).height(200).crop("crop")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 300, height: 200, crop: "crop"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 300, height: 200, crop: "crop"})
React:
<Video publicId="dog" >
  <Transformation width="300" height="200" crop="crop" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="300" height="200" crop="crop">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Height(200).Crop("crop")).BuildVideoTag("dog")

Note: You can deliver the video as webm, mp4, ogv or flv by simply changing the video format file extension. For details, see Transcoding videos.

Embedding videos in web pages

You can use Cloudinary’s web framework SDKs to add videos to your web application and simplify creating manipulation URLs and embedding HTML5 video tags with multiple video sources and settings.

The Cloudinary video tag helper method (e.g. cl_video_tag in Ruby on Rails) automatically generates an HTML5 video tag including the video source URLs of all relevant formats supported by web browsers (webm, mp4 and ogv), as well as a poster thumbnail image. The browser then automatically selects the video format it supports, while the video files are created dynamically when first accessed by your users.

You can optionally control the generation of the HTML5 video tag and specify transformation parameters to manipulate the video to match your graphic design. The video tag helper method uses the following structure:

cl_video_tag(public_id, options = {})

public_id: (required) the unique identifier of the uploaded video.

Where possible options are:

  • 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']
  • manipulation params: the manipulation(s) to carry out on the video, such as cropping, resizing, etc (see the Video transformations reference table for more details on possible parameters and values)
  • 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}}
  • 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.
    • A struct including the transformations to apply to the default image (you can include the public_id of an uploaded image to use instead of the default 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).

Example 1: Simply creating an HTML5 video tag for the uploaded mp4 video named dog:

Ruby:
cl_video_tag("dog")
PHP:
<?php echo cl_video_tag("dog"); ?>
Python:
cloudinary.CloudinaryVideo("dog").video()
Node.js:
cloudinary.video("dog")
Java:
<cl:video src="dog"/>

Generates the following HTML5 video tag:

<video poster="http://res.cloudinary.com/demo/video/upload/dog.jpg">
  <source src="http://res.cloudinary.com/demo/video/upload/dog.webm" type="video/webm"/>
  <source src="http://res.cloudinary.com/demo/video/upload/dog.mp4" type="video/mp4"/>
  <source src="http://res.cloudinary.com/demo/video/upload/dog.ogv" type="video/ogg"/>
</video>

Example 2: Creating an HTML5 video tag for the uploaded mp4 video named dog, where the video is resized to a width of 300 pixels, a height of 300 pixels, padded with a blue background to fill the new dimensions, given a fallback string in the case that the video tag is not supported, specified that controls should be displayed and that the file should not be preloaded:

Ruby:
cl_video_tag("dog", :width => 300, :height => 300, 
  :crop => :pad, :background => "blue", 
  :preload => "none", :controls => true,
  :fallback_content => "Your browser does not support HTML5 video tags" )
PHP:
<?php echo cl_video_tag("dog", 
  array("width" => 300, "height" => 300, 
    "crop" => "pad", "background" => "blue", 
    "preload" => "none", "controls" => true,
    "fallback_content" => "Your browser does not support HTML5 video tags")); ?>
Python:
cloudinary.CloudinaryVideo("dog").video( 
  width = 300, height = 300, 
  crop = "pad", background = "blue", 
  preload = "none", controls = True,
  fallback_content = "Your browser does not support HTML5 video tags")
Node.js:
cloudinary.video("dog" { width: 300, height: 300, 
  crop: "pad", background: "blue", 
  preload: "none", controls: true,
  fallback_content: "Your browser does not support HTML5 video tags" })
Java:
<cl:video src="dog" width = "300", height = "300", 
  crop = "pad", background = "blue", 
  preload = "none", controls = "true",
  fallback_content = "Your browser does not support HTML5 video tags"/>

Generates the following HTML5 video tag:

<video poster="http://res.cloudinary.com/demo/video/upload/dog.jpg" preload="none" controls>
  <source src="http://res.cloudinary.com/demo/video/upload/w_300,h_300,c_pad,b_blue/dog.webm" type="video/webm"/>
  <source src="http://res.cloudinary.com/demo/video/upload/w_300,h_300,c_pad,b_blue/dog.mp4" type="video/mp4"/>
  <source src="http://res.cloudinary.com/demo/video/upload/w_300,h_300,c_pad,b_blue/dog.ogv" type="video/ogg"/>
   Your browser does not support HTML5 video tags
</video>

Example 3: Creating 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, not to use a poster image and that the file should autoplay in a loop:

Ruby:
cl_video_tag("dog", :width => 200, :height => 150, :crop => :crop,  
  :loop => true, :autoplay => true, :poster => false,
  :fallback_content => "Your browser does not support HTML5 video tags" )
PHP:
<?php echo cl_video_tag("dog", 
  array("width" => 200, "height" => 150, 
    "crop" => "crop", "loop" => true, 
    "autoplay" => true, "poster" => false,
    "fallback_content" => "Your browser does not support HTML5 video tags")); ?>
Python:
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.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:
<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"/>

Generates the following HTML5 video tag:

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

Resizing and cropping videos

You can resize and crop videos in order to match the graphic design of your web site or mobile app. Whether videos are uploaded in your server-side code or by your users, the originals are stored in the cloud. You can then dynamically create multiple resized, cropped and manipulated videos on-the-fly and deliver them via dynamic URLs or use code to either add video tags or build the URLs.

Change the size of a video with the width and height parameters (w and h in URLs). You can resize the video by using both the width and height parameters or with only one of them (the other dimension is automatically updated to maintain the aspect ratio).

  • Using an integer value sets the new dimension to that number in pixels. For example, w_150 sets the width to exactly 150 pixels.
  • Using a decimal value sets the new dimension as a multiple of the original dimension. For example, w_0.5 sets the width to half the original width.

Examples of resizing the uploaded mp4 video named dog:

  1. Resizing to a width of 150 pixels and a height of 100 pixels:

    Ruby:
    cl_video_tag("dog", :width=>150, :height=>100, :crop=>"scale")
    PHP:
    cl_video_tag("dog", array("width"=>150, "height"=>100, "crop"=>"scale"))
    Python:
    CloudinaryVideo("dog").video(width=150, height=100, crop="scale")
    Node.js:
    cloudinary.video("dog", {width: 150, height: 100, crop: "scale"})
    Java:
    cloudinary.url().transformation(new Transformation().width(150).height(100).crop("scale")).videoTag("dog")
    JS:
    cl.videoTag('dog', {width: 150, height: 100, crop: "scale"}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {width: 150, height: 100, crop: "scale"})
    React:
    <Video publicId="dog" >
      <Transformation width="150" height="100" crop="scale" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation width="150" height="100" crop="scale">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(150).Height(100).Crop("scale")).BuildVideoTag("dog")

  2. Resizing the width to half the original width, maintaining the aspect ratio:

    Ruby:
    cl_video_tag("dog", :width=>0.5, :crop=>"scale")
    PHP:
    cl_video_tag("dog", array("width"=>0.5, "crop"=>"scale"))
    Python:
    CloudinaryVideo("dog").video(width=0.5, crop="scale")
    Node.js:
    cloudinary.video("dog", {width: "0.5", crop: "scale"})
    Java:
    cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).videoTag("dog")
    JS:
    cl.videoTag('dog', {width: "0.5", crop: "scale"}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {width: "0.5", crop: "scale"})
    React:
    <Video publicId="dog" >
      <Transformation width="0.5" crop="scale" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation width="0.5" crop="scale">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildVideoTag("dog")

  3. Resizing the height to 200 pixels, maintaining the aspect ratio:

    Ruby:
    cl_video_tag("dog", :height=>200, :crop=>"scale")
    PHP:
    cl_video_tag("dog", array("height"=>200, "crop"=>"scale"))
    Python:
    CloudinaryVideo("dog").video(height=200, crop="scale")
    Node.js:
    cloudinary.video("dog", {height: 200, crop: "scale"})
    Java:
    cloudinary.url().transformation(new Transformation().height(200).crop("scale")).videoTag("dog")
    JS:
    cl.videoTag('dog', {height: 200, crop: "scale"}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {height: 200, crop: "scale"})
    React:
    <Video publicId="dog" >
      <Transformation height="200" crop="scale" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation height="200" crop="scale">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(200).Crop("scale")).BuildVideoTag("dog")

When changing the dimensions of an uploaded video by manipulating the video's height and/or width, you need to decide how to adapt or "crop" the video to fit into the requested size. Use the crop parameter for selecting the crop mode (c in URLs). Cloudinary supports the following video cropping modes: scale, fit, fill, limit, pad, lpad and crop.

scale

Change the size of the video exactly to the given width and height without necessarily retaining the original aspect ratio: all original video parts are visible but might be stretched or shrunk. If only the width or height is given, then the video is scaled to the new dimension while retaining the original aspect ratio (the other dimension is also scaled proportionately). This is the default cropping mode for resizing videos if the crop mode is not specified.

For example, the uploaded mp4 video named dog scaled to a width of 150 pixels while maintaining aspect ratio:

Ruby:
cl_video_tag("dog", :width=>150, :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>150, "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=150, crop="scale")
Node.js:
cloudinary.video("dog", {width: 150, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(150).crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 150, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 150, crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="150" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="150" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(150).Crop("scale")).BuildVideoTag("dog")

fit

Change video size to fit in the given width and height while retaining the original aspect ratio with all the original video parts visible. The new dimensions of the transformed video must not exceed the specified width and/or height, but may be enlarged if the video is smaller than the new dimensions. However, the video may be smaller than the specified values in order to keep the original proportions.

For example, the uploaded mp4 video named dog fitted to a width and height of 250 pixels while retaining the aspect ratio:

Ruby:
cl_video_tag("dog", :width=>250, :height=>250, :crop=>"fit")
PHP:
cl_video_tag("dog", array("width"=>250, "height"=>250, "crop"=>"fit"))
Python:
CloudinaryVideo("dog").video(width=250, height=250, crop="fit")
Node.js:
cloudinary.video("dog", {width: 250, height: 250, crop: "fit"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).crop("fit")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 250, height: 250, crop: "fit"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 250, height: 250, crop: "fit"})
React:
<Video publicId="dog" >
  <Transformation width="250" height="250" crop="fit" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="250" height="250" crop="fit">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(250).Height(250).Crop("fit")).BuildVideoTag("dog")

fill

Create a video with the exact given width and height while retaining the original aspect ratio, using only part of the video that fills the given dimensions if necessary (only part of the original video might be visible if the requested aspect ratio is different to the original aspect ratio). You can also specify which part of the original video to use for filling the required dimensions in case the proportions do not match by using the gravity parameter.

For example, the uploaded mp4 video named dog filled to a width and height of 250 pixels while retaining the aspect ratio:

Ruby:
cl_video_tag("dog", :width=>250, :height=>250, :crop=>"fill")
PHP:
cl_video_tag("dog", array("width"=>250, "height"=>250, "crop"=>"fill"))
Python:
CloudinaryVideo("dog").video(width=250, height=250, crop="fill")
Node.js:
cloudinary.video("dog", {width: 250, height: 250, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).crop("fill")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 250, height: 250, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 250, height: 250, crop: "fill"})
React:
<Video publicId="dog" >
  <Transformation width="250" height="250" crop="fill" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="250" height="250" crop="fill">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(250).Height(250).Crop("fill")).BuildVideoTag("dog")

limit

The limit mode is used for creating a video that does not exceed the given width and height. If the original video is smaller than the given limits, the generated video uses the same dimensions as the original one. If the original is bigger than the given limits, it will be scaled down to fit the given dimensions while retaining original proportions (similar to the fit mode in this case).

For example, the uploaded mp4 video named dog limited to a width and height of 250 pixels while retaining the aspect ratio:

Ruby:
cl_video_tag("dog", :width=>250, :height=>250, :crop=>"limit")
PHP:
cl_video_tag("dog", array("width"=>250, "height"=>250, "crop"=>"limit"))
Python:
CloudinaryVideo("dog").video(width=250, height=250, crop="limit")
Node.js:
cloudinary.video("dog", {width: 250, height: 250, crop: "limit"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).crop("limit")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 250, height: 250, crop: "limit"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 250, height: 250, crop: "limit"})
React:
<Video publicId="dog" >
  <Transformation width="250" height="250" crop="limit" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="250" height="250" crop="limit">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(250).Height(250).Crop("limit")).BuildVideoTag("dog")

pad

Resize the video to fill the given width and height while retaining the original aspect ratio.

If the proportions of the original video do not match the required ones, padding is added to the video to reach the required size. You can also specify which part of the original video to use for filling the required dimensions in case the proportions do not match by using the gravity parameter, and specify the color of the background in the case that padding is added.

For example, the uploaded mp4 video named dog padded to a width and height of 250 pixels while retaining the aspect ratio:

Ruby:
cl_video_tag("dog", :width=>250, :height=>250, :background=>"black", :crop=>"pad")
PHP:
cl_video_tag("dog", array("width"=>250, "height"=>250, "background"=>"black", "crop"=>"pad"))
Python:
CloudinaryVideo("dog").video(width=250, height=250, background="black", crop="pad")
Node.js:
cloudinary.video("dog", {width: 250, height: 250, background: "black", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).background("black").crop("pad")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 250, height: 250, background: "black", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 250, height: 250, background: "black", crop: "pad"})
React:
<Video publicId="dog" >
  <Transformation width="250" height="250" background="black" crop="pad" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="250" height="250" background="black" crop="pad">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(250).Height(250).Background("black").Crop("pad")).BuildVideoTag("dog")

lpad

Same as the pad mode above, but doesn't scale the video up if your requested dimensions are larger than the original video's.

For example, the uploaded mp4 video named dog lpadded to a width and height of 250 pixels while retaining the aspect ratio and limiting the size to no larger than the original video:

Ruby:
cl_video_tag("dog", :width=>250, :height=>250, :background=>"black", :crop=>"lpad")
PHP:
cl_video_tag("dog", array("width"=>250, "height"=>250, "background"=>"black", "crop"=>"lpad"))
Python:
CloudinaryVideo("dog").video(width=250, height=250, background="black", crop="lpad")
Node.js:
cloudinary.video("dog", {width: 250, height: 250, background: "black", crop: "lpad"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).background("black").crop("lpad")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 250, height: 250, background: "black", crop: "lpad"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 250, height: 250, background: "black", crop: "lpad"})
React:
<Video publicId="dog" >
  <Transformation width="250" height="250" background="black" crop="lpad" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="250" height="250" background="black" crop="lpad">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(250).Height(250).Background("black").Crop("lpad")).BuildVideoTag("dog")

crop

Extract only part of a given width and height out of the original video. The original proportions are retained and you can also specify which part of the original video to use for filling the required dimensions by giving the x and y coordinates of the top left corner, or by using the gravity parameter.

For example, cropping the uploaded mp4 video named dog to a width of 350 pixels and a height of 200 pixels, starting at the x = 230 pixels and y = 20 pixels coordinate:

Ruby:
cl_video_tag("dog", :width=>350, :height=>200, :x=>230, :y=>20, :crop=>"crop")
PHP:
cl_video_tag("dog", array("width"=>350, "height"=>200, "x"=>230, "y"=>20, "crop"=>"crop"))
Python:
CloudinaryVideo("dog").video(width=350, height=200, x=230, y=20, crop="crop")
Node.js:
cloudinary.video("dog", {width: 350, height: 200, x: 230, y: 20, crop: "crop"})
Java:
cloudinary.url().transformation(new Transformation().width(350).height(200).x(230).y(20).crop("crop")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 350, height: 200, x: 230, y: 20, crop: "crop"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 350, height: 200, x: 230, y: 20, crop: "crop"})
React:
<Video publicId="dog" >
  <Transformation width="350" height="200" x="230" y="20" crop="crop" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="350" height="200" x="230" y="20" crop="crop">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(350).Height(200).X(230).Y(20).Crop("crop")).BuildVideoTag("dog")

Aspect ratio

Use the aspect_ratio parameter (ar in URLs) to resize the video to a new aspect ratio. This parameter is used together with a specified crop mode that determines how the video is adjusted to the new dimensions. This parameter can also be used when changing the dimensions of a video with only the width or height parameters (w and h in URLs) - the other dimension is then automatically updated to maintain the given aspect ratio.

The aspect_ratio parameter accepts a value in one of the following forms:

  • a:b where a signifies the relative width and b the relative height (e.g., 4:3 or 16:9).
  • a decimal value representing the ratio of the width divided by the height (e.g., 1.33 or 2.5).

Examples with the uploaded mp4 video named dog:

  1. Cropped to an aspect ratio of 2.5:

    Ruby:
    cl_video_tag("dog", :aspect_ratio=>"2.5", :crop=>"crop")
    PHP:
    cl_video_tag("dog", array("aspect_ratio"=>"2.5", "crop"=>"crop"))
    Python:
    CloudinaryVideo("dog").video(aspect_ratio="2.5", crop="crop")
    Node.js:
    cloudinary.video("dog", {aspect_ratio: "2.5", crop: "crop"})
    Java:
    cloudinary.url().transformation(new Transformation().aspectRatio("2.5").crop("crop")).videoTag("dog")
    JS:
    cl.videoTag('dog', {aspect_ratio: "2.5", crop: "crop"}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {aspect_ratio: "2.5", crop: "crop"})
    React:
    <Video publicId="dog" >
      <Transformation aspect_ratio="2.5" crop="crop" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation aspect_ratio="2.5" crop="crop">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("2.5").Crop("crop")).BuildVideoTag("dog")

  2. Filled to a width of 400 pixels with an aspect ratio of 4:3:

    Ruby:
    cl_video_tag("dog", :width=>400, :aspect_ratio=>"4:3", :crop=>"fill")
    PHP:
    cl_video_tag("dog", array("width"=>400, "aspect_ratio"=>"4:3", "crop"=>"fill"))
    Python:
    CloudinaryVideo("dog").video(width=400, aspect_ratio="4:3", crop="fill")
    Node.js:
    cloudinary.video("dog", {width: 400, aspect_ratio: "4:3", crop: "fill"})
    Java:
    cloudinary.url().transformation(new Transformation().width(400).aspectRatio("4:3").crop("fill")).videoTag("dog")
    JS:
    cl.videoTag('dog', {width: 400, aspect_ratio: "4:3", crop: "fill"}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {width: 400, aspect_ratio: "4:3", crop: "fill"})
    React:
    <Video publicId="dog" >
      <Transformation width="400" aspect_ratio="4:3" crop="fill" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation width="400" aspect_ratio="4:3" crop="fill">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(400).AspectRatio("4:3").Crop("fill")).BuildVideoTag("dog")

Gravity

Gravity specifies which part of the original video to use for certain cropping modes, for filling the required dimensions in case the proportions do not match. This is accomplished by using the gravity parameter (g in URLs). The supported gravity values are: north_east, north, north_west, west, south_west, south, south_east, east, or center (the default value).

For example, the uploaded mp4 video named dog filled to a width and height of 250 pixels while retaining the aspect ratio, with gravity set to north:

Ruby:
cl_video_tag("dog", :width=>250, :height=>250, :gravity=>"north", :crop=>"fill")
PHP:
cl_video_tag("dog", array("width"=>250, "height"=>250, "gravity"=>"north", "crop"=>"fill"))
Python:
CloudinaryVideo("dog").video(width=250, height=250, gravity="north", crop="fill")
Node.js:
cloudinary.video("dog", {width: 250, height: 250, gravity: "north", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(250).height(250).gravity("north").crop("fill")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 250, height: 250, gravity: "north", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 250, height: 250, gravity: "north", crop: "fill"})
React:
<Video publicId="dog" >
  <Transformation width="250" height="250" gravity="north" crop="fill" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="250" height="250" gravity="north" crop="fill">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(250).Height(250).Gravity("north").Crop("fill")).BuildVideoTag("dog")

Background color

Use the background parameter (b in URLs) to set the color in the case of padding added with the “pad” crop mode. The color can be set as an RGB hex triplet (e.g. b_rgb:3e2222), a 3 character RGB hex (e.g. b_rgb:777) or a named color (e.g. b_green). Cloudinary's client libraries also support a # shortcut for RGB (e.g. setting background to #3e2222 which is then translated to b_rgb:3e2222).

For example, the uploaded mp4 video named dog padded to a width and height of 300 pixels with a green background:

Ruby:
cl_video_tag("dog", :width=>300, :height=>300, :background=>"green", :crop=>"pad")
PHP:
cl_video_tag("dog", array("width"=>300, "height"=>300, "background"=>"green", "crop"=>"pad"))
Python:
CloudinaryVideo("dog").video(width=300, height=300, background="green", crop="pad")
Node.js:
cloudinary.video("dog", {width: 300, height: 300, background: "green", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().width(300).height(300).background("green").crop("pad")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 300, height: 300, background: "green", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 300, height: 300, background: "green", crop: "pad"})
React:
<Video publicId="dog" >
  <Transformation width="300" height="300" background="green" crop="pad" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="300" height="300" background="green" crop="pad">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Height(300).Background("green").Crop("pad")).BuildVideoTag("dog")

Trimming videos

Trim a video (and discard the rest) by using a combination of the following 3 parameters to specify the section of video to keep after trimming:

  • start_offset (so in URLs) specifies the start.
  • end_offset (eo in URLs) specifies the end.
  • duration (du in URLs) specifies the duration.

Possible values:

  • A float representing the time in seconds e.g. 5.44 (5 seconds and 440 milliseconds)
  • A string representing the percentage of the video length. This string consists of a number with a p appended e.g. 35p (0p is the first frame and 100p is the last frame). The client libraries also support appending a % instead of a p.

Examples with the uploaded mp4 video named dog:

  1. Trimming the video to the section that starts at 6.5 seconds and ends at 10 seconds:

    Ruby:
    cl_video_tag("dog", :start_offset=>"6.5", :end_offset=>"10")
    PHP:
    cl_video_tag("dog", array("start_offset"=>"6.5", "end_offset"=>"10"))
    Python:
    CloudinaryVideo("dog").video(start_offset="6.5", end_offset="10")
    Node.js:
    cloudinary.video("dog", {start_offset: "6.5", end_offset: "10"})
    Java:
    cloudinary.url().transformation(new Transformation().startOffset("6.5").endOffset("10")).videoTag("dog")
    JS:
    cl.videoTag('dog', {start_offset: "6.5", end_offset: "10"}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {start_offset: "6.5", end_offset: "10"})
    React:
    <Video publicId="dog" >
      <Transformation start_offset="6.5" end_offset="10" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation start_offset="6.5" end_offset="10">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().StartOffset("6.5").EndOffset("10")).BuildVideoTag("dog")

  2. Trimming the video to the section that starts at 10 percent with a duration of 30 percent (effectively from the 10 percent mark to the 40 percent mark):

    Ruby:
    cl_video_tag("dog", :start_offset=>"10p", :duration=>"30p")
    PHP:
    cl_video_tag("dog", array("start_offset"=>"10p", "duration"=>"30p"))
    Python:
    CloudinaryVideo("dog").video(start_offset="10p", duration="30p")
    Node.js:
    cloudinary.video("dog", {start_offset: "10p", duration: "30p"})
    Java:
    cloudinary.url().transformation(new Transformation().startOffset("10p").duration("30p")).videoTag("dog")
    JS:
    cl.videoTag('dog', {start_offset: "10p", duration: "30p"}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {start_offset: "10p", duration: "30p"})
    React:
    <Video publicId="dog" >
      <Transformation start_offset="10p" duration="30p" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation start_offset="10p" duration="30p">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().StartOffset("10p").Duration("30p")).BuildVideoTag("dog")

Client libraries also support the offset shortcut parameter to combine the 2 values representing the start and end of the video to keep e.g. [2.5, 9.5] or ['10p', '30p']. In frameworks that support ranges you can use: 2.66..3.21 or '35%..70%'. An equivalent of the offset shortcut is not available for URLs.

For example, trimming the uploaded mp4 video named dog to the section that starts at 6.5 seconds and ends at 10 seconds:

Ruby:
cl_video_tag("dog", :start_offset=>"6.5", :end_offset=>"10")
PHP:
cl_video_tag("dog", array("start_offset"=>"6.5", "end_offset"=>"10"))
Python:
CloudinaryVideo("dog").video(start_offset="6.5", end_offset="10")
Node.js:
cloudinary.video("dog", {start_offset: "6.5", end_offset: "10"})
Java:
cloudinary.url().transformation(new Transformation().startOffset("6.5").endOffset("10")).videoTag("dog")
JS:
cl.videoTag('dog', {start_offset: "6.5", end_offset: "10"}).toHtml();
jQuery:
$.cloudinary.video("dog", {start_offset: "6.5", end_offset: "10"})
React:
<Video publicId="dog" >
  <Transformation start_offset="6.5" end_offset="10" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation start_offset="6.5" end_offset="10">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().StartOffset("6.5").EndOffset("10")).BuildVideoTag("dog")

Concatenating videos

Cloudinary supports the concatenation of videos by using the overlay video parameter (l_video: in URLs) to specify the name of another uploaded video and then the splice flag (fl_splice in URLs) to indicate that the video should be concatenated on to the container video and not added as an overlay.

Note that the videos spliced together must be the same width and height. You can use size transformation parameters to ensure that both videos match in size (w and h).

For example, to concatenate the video named dog on to the end of the video named kitten_fighting, with both videos set to a width of 300 pixels and a height of 200 pixels:

Ruby:
cl_video_tag("kitten_fighting", :transformation=>[
  {:width=>300, :height=>200, :crop=>"fill"},
  {:overlay=>"video:dog", :flags=>"splice", :width=>300, :height=>200, :crop=>"fill"}
  ])
PHP:
cl_video_tag("kitten_fighting", array("transformation"=>array(
  array("width"=>300, "height"=>200, "crop"=>"fill"),
  array("overlay"=>"video:dog", "flags"=>"splice", "width"=>300, "height"=>200, "crop"=>"fill")
  )))
Python:
CloudinaryVideo("kitten_fighting").video(transformation=[
  {"width": 300, "height": 200, "crop": "fill"},
  {"overlay": "video:dog", "flags": "splice", "width": 300, "height": 200, "crop": "fill"}
  ])
Node.js:
cloudinary.video("kitten_fighting", {transformation: [
  {width: 300, height: 200, crop: "fill"},
  {overlay: "video:dog", flags: "splice", width: 300, height: 200, crop: "fill"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(300).height(200).crop("fill").chain()
  .overlay("video:dog").flags("splice").width(300).height(200).crop("fill")).videoTag("kitten_fighting")
JS:
cl.videoTag('kitten_fighting', {transformation: [
  {width: 300, height: 200, crop: "fill"},
  {overlay: "video:dog", flags: "splice", width: 300, height: 200, crop: "fill"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("kitten_fighting", {transformation: [
  {width: 300, height: 200, crop: "fill"},
  {overlay: "video:dog", flags: "splice", width: 300, height: 200, crop: "fill"}
  ]})
React:
<Video publicId="kitten_fighting" >
  <Transformation width="300" height="200" crop="fill" />
  <Transformation overlay="video:dog" flags="splice" width="300" height="200" crop="fill" />
</Video>
Angular:
<cl-video public-id="kitten_fighting" >
  <cl-transformation width="300" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:dog" flags="splice" width="300" height="200" crop="fill">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Height(200).Crop("fill").Chain()
  .Overlay("video:dog").Flags("splice").Width(300).Height(200).Crop("fill")).BuildVideoTag("kitten_fighting")

By default, the video is spliced on to the end of the container video: to splice the video on to the beginning, add the start_offset parameter and set it to 0 (so_0 in URLs). For example, to concatenate the video named dog on to the beginning of the video named kitten_fighting, with both videos set to a width of 300 pixels and a height of 200 pixels:

Ruby:
cl_video_tag("kitten_fighting", :transformation=>[
  {:width=>300, :height=>200, :crop=>"fill"},
  {:overlay=>"video:dog", :flags=>"splice", :width=>300, :height=>200, :start_offset=>"0", :crop=>"fill"}
  ])
PHP:
cl_video_tag("kitten_fighting", array("transformation"=>array(
  array("width"=>300, "height"=>200, "crop"=>"fill"),
  array("overlay"=>"video:dog", "flags"=>"splice", "width"=>300, "height"=>200, "start_offset"=>"0", "crop"=>"fill")
  )))
Python:
CloudinaryVideo("kitten_fighting").video(transformation=[
  {"width": 300, "height": 200, "crop": "fill"},
  {"overlay": "video:dog", "flags": "splice", "width": 300, "height": 200, "start_offset": "0", "crop": "fill"}
  ])
Node.js:
cloudinary.video("kitten_fighting", {transformation: [
  {width: 300, height: 200, crop: "fill"},
  {overlay: "video:dog", flags: "splice", width: 300, height: 200, start_offset: "0", crop: "fill"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(300).height(200).crop("fill").chain()
  .overlay("video:dog").flags("splice").width(300).height(200).startOffset("0").crop("fill")).videoTag("kitten_fighting")
JS:
cl.videoTag('kitten_fighting', {transformation: [
  {width: 300, height: 200, crop: "fill"},
  {overlay: "video:dog", flags: "splice", width: 300, height: 200, start_offset: "0", crop: "fill"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("kitten_fighting", {transformation: [
  {width: 300, height: 200, crop: "fill"},
  {overlay: "video:dog", flags: "splice", width: 300, height: 200, start_offset: "0", crop: "fill"}
  ]})
React:
<Video publicId="kitten_fighting" >
  <Transformation width="300" height="200" crop="fill" />
  <Transformation overlay="video:dog" flags="splice" width="300" height="200" start_offset="0" crop="fill" />
</Video>
Angular:
<cl-video public-id="kitten_fighting" >
  <cl-transformation width="300" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:dog" flags="splice" width="300" height="200" start_offset="0" crop="fill">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Height(200).Crop("fill").Chain()
  .Overlay("video:dog").Flags("splice").Width(300).Height(200).StartOffset("0").Crop("fill")).BuildVideoTag("kitten_fighting")

To concatenate only a section of a video on to another video use the offset parameters (see Trimming videos for more information on the parameters and their possible values) together with the layer_apply flag (fl_layer_apply in URLs). For example, to splice the first 5 seconds of the video named dog to the end of the same video named dog rotated by 180 degrees, with both videos set to a width of 300 pixels and a height of 200 pixels.

Ruby:
cl_video_tag("dog", :transformation=>[
  {:angle=>180},
  {:width=>300, :height=>200, :crop=>"fill"},
  {:overlay=>"video:dog", :flags=>"splice", :width=>300, :height=>200, :start_offset=>"0", :duration=>"5", :crop=>"fill"},
  {:flags=>"layer_apply"}
  ])
PHP:
cl_video_tag("dog", array("transformation"=>array(
  array("angle"=>180),
  array("width"=>300, "height"=>200, "crop"=>"fill"),
  array("overlay"=>"video:dog", "flags"=>"splice", "width"=>300, "height"=>200, "start_offset"=>"0", "duration"=>"5", "crop"=>"fill"),
  array("flags"=>"layer_apply")
  )))
Python:
CloudinaryVideo("dog").video(transformation=[
  {"angle": 180},
  {"width": 300, "height": 200, "crop": "fill"},
  {"overlay": "video:dog", "flags": "splice", "width": 300, "height": 200, "start_offset": "0", "duration": "5", "crop": "fill"},
  {"flags": "layer_apply"}
  ])
Node.js:
cloudinary.video("dog", {transformation: [
  {angle: 180},
  {width: 300, height: 200, crop: "fill"},
  {overlay: "video:dog", flags: "splice", width: 300, height: 200, start_offset: "0", duration: "5", crop: "fill"},
  {flags: "layer_apply"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .angle(180).chain()
  .width(300).height(200).crop("fill").chain()
  .overlay("video:dog").flags("splice").width(300).height(200).startOffset("0").duration("5").crop("fill").chain()
  .flags("layer_apply")).videoTag("dog")
JS:
cl.videoTag('dog', {transformation: [
  {angle: 180},
  {width: 300, height: 200, crop: "fill"},
  {overlay: "video:dog", flags: "splice", width: 300, height: 200, start_offset: "0", duration: "5", crop: "fill"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("dog", {transformation: [
  {angle: 180},
  {width: 300, height: 200, crop: "fill"},
  {overlay: "video:dog", flags: "splice", width: 300, height: 200, start_offset: "0", duration: "5", crop: "fill"},
  {flags: "layer_apply"}
  ]})
React:
<Video publicId="dog" >
  <Transformation angle="180" />
  <Transformation width="300" height="200" crop="fill" />
  <Transformation overlay="video:dog" flags="splice" width="300" height="200" start_offset="0" duration="5" crop="fill" />
  <Transformation flags="layer_apply" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation angle="180">
  </cl-transformation>
  <cl-transformation width="300" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:dog" flags="splice" width="300" height="200" start_offset="0" duration="5" crop="fill">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Angle(180).Chain()
  .Width(300).Height(200).Crop("fill").Chain()
  .Overlay("video:dog").Flags("splice").Width(300).Height(200).StartOffset("0").Duration("5").Crop("fill").Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

Concatenate videos with images

Cloudinary also supports the concatenation of videos with images by using the following combination of parameters:

  • overlay (l: in URLs) to specify the name of an uploaded image,
  • splice flag (fl_splice in URLs) to indicate that the image should be concatenated on to the container video and not added as an overlay,
  • duration parameter (du in URLs) to specify the amount of time in seconds to display the image.
  • start_offset (optional) set to 0 (so_0 in URLs) to concatenate the image at the beginning of the video instead of at the end.
  • layer_apply flag (fl_layer_apply) to indicate that the above parameters are applied to the image (with the overlay parameter) and not the containing video.

For example, to concatenate the image named sample to the start of the video named dog for a duration of 3 seconds (both the video and image are scaled to a width of 300 pixels and a height of 200 pixels):

Ruby:
cl_video_tag("dog", :transformation=>[
  {:width=>300, :height=>200, :crop=>"scale"},
  {:width=>300, :height=>200, :overlay=>"sample", :flags=>"splice", :duration=>"3"},
  {:start_offset=>"0", :flags=>"layer_apply"}
  ])
PHP:
cl_video_tag("dog", array("transformation"=>array(
  array("width"=>300, "height"=>200, "crop"=>"scale"),
  array("width"=>300, "height"=>200, "overlay"=>"sample", "flags"=>"splice", "duration"=>"3"),
  array("start_offset"=>"0", "flags"=>"layer_apply")
  )))
Python:
CloudinaryVideo("dog").video(transformation=[
  {"width": 300, "height": 200, "crop": "scale"},
  {"width": 300, "height": 200, "overlay": "sample", "flags": "splice", "duration": "3"},
  {"start_offset": "0", "flags": "layer_apply"}
  ])
Node.js:
cloudinary.video("dog", {transformation: [
  {width: 300, height: 200, crop: "scale"},
  {width: 300, height: 200, overlay: "sample", flags: "splice", duration: "3"},
  {start_offset: "0", flags: "layer_apply"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(300).height(200).crop("scale").chain()
  .width(300).height(200).overlay("sample").flags("splice").duration("3").chain()
  .startOffset("0").flags("layer_apply")).videoTag("dog")
JS:
cl.videoTag('dog', {transformation: [
  {width: 300, height: 200, crop: "scale"},
  {width: 300, height: 200, overlay: "sample", flags: "splice", duration: "3"},
  {start_offset: "0", flags: "layer_apply"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("dog", {transformation: [
  {width: 300, height: 200, crop: "scale"},
  {width: 300, height: 200, overlay: "sample", flags: "splice", duration: "3"},
  {start_offset: "0", flags: "layer_apply"}
  ]})
React:
<Video publicId="dog" >
  <Transformation width="300" height="200" crop="scale" />
  <Transformation width="300" height="200" overlay="sample" flags="splice" duration="3" />
  <Transformation start_offset="0" flags="layer_apply" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="300" height="200" crop="scale">
  </cl-transformation>
  <cl-transformation width="300" height="200" overlay="sample" flags="splice" duration="3">
  </cl-transformation>
  <cl-transformation start_offset="0" flags="layer_apply">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Height(200).Crop("scale").Chain()
  .Width(300).Height(200).Overlay("sample").Flags("splice").Duration("3").Chain()
  .StartOffset("0").Flags("layer_apply")).BuildVideoTag("dog")

Rotating videos

Rotate the video by any arbitrary angle in degrees with the angle parameter (a in URLs). If the angle is not a multiple of 90 then a rectangular bounding box is added containing the rotated video and empty space.

Examples with the uploaded mp4 video named dog:

  1. Rotating the video by 90 degrees:

    Ruby:
    cl_video_tag("dog", :angle=>90)
    PHP:
    cl_video_tag("dog", array("angle"=>90))
    Python:
    CloudinaryVideo("dog").video(angle=90)
    Node.js:
    cloudinary.video("dog", {angle: 90})
    Java:
    cloudinary.url().transformation(new Transformation().angle(90)).videoTag("dog")
    JS:
    cl.videoTag('dog', {angle: 90}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {angle: 90})
    React:
    <Video publicId="dog" >
      <Transformation angle="90" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation angle="90">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Angle(90)).BuildVideoTag("dog")

  2. Rotating the video by 20 degrees (automatically adds a bounding box):

    Ruby:
    cl_video_tag("dog", :angle=>20)
    PHP:
    cl_video_tag("dog", array("angle"=>20))
    Python:
    CloudinaryVideo("dog").video(angle=20)
    Node.js:
    cloudinary.video("dog", {angle: 20})
    Java:
    cloudinary.url().transformation(new Transformation().angle(20)).videoTag("dog")
    JS:
    cl.videoTag('dog', {angle: 20}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {angle: 20})
    React:
    <Video publicId="dog" >
      <Transformation angle="20" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation angle="20">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Angle(20)).BuildVideoTag("dog")

Rounding corners and creating circular videos

Transforming a video to a rounded version is done using the radius parameter (r in URLs) set to the number of pixels the radius of all four corners should be. For example, the uploaded mp4 video named dog resized to a width of 300 pixels and with rounded corners set to a radius of 20 pixels:

Ruby:
cl_video_tag("dog", :width=>300, :radius=>30, :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>300, "radius"=>30, "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=300, radius=30, crop="scale")
Node.js:
cloudinary.video("dog", {width: 300, radius: 30, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(300).radius(30).crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 300, radius: 30, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 300, radius: 30, crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="300" radius="30" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="300" radius="30" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Radius(30).Crop("scale")).BuildVideoTag("dog")

Cloudinary also supports cropping videos to the shape of an ellipse. Simply pass max as the value of the radius parameter. For example, the uploaded mp4 video named dog resized to a width of 300 pixels and with maximum radius cropping:

Ruby:
cl_video_tag("dog", :width=>300, :radius=>"max", :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>300, "radius"=>"max", "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=300, radius="max", crop="scale")
Node.js:
cloudinary.video("dog", {width: 300, radius: "max", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(300).radius("max").crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 300, radius: "max", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 300, radius: "max", crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="300" radius="max" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="300" radius="max" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Radius("max").Crop("scale")).BuildVideoTag("dog")

You can also change the background color of the video from the default white color using the background parameter. Likewise, if the width and height of the video are identical (i.e., the same value) then setting the radius parameter to max generates a circular video. For example, the uploaded mp4 video named dog with width and height set to 300 pixels, and with maximum radius cropping using a blue background:

Ruby:
cl_video_tag("dog", :width=>300, :height=>300, :background=>"blue", :radius=>"max", :crop=>"fill")
PHP:
cl_video_tag("dog", array("width"=>300, "height"=>300, "background"=>"blue", "radius"=>"max", "crop"=>"fill"))
Python:
CloudinaryVideo("dog").video(width=300, height=300, background="blue", radius="max", crop="fill")
Node.js:
cloudinary.video("dog", {width: 300, height: 300, background: "blue", radius: "max", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(300).height(300).background("blue").radius("max").crop("fill")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 300, height: 300, background: "blue", radius: "max", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 300, height: 300, background: "blue", radius: "max", crop: "fill"})
React:
<Video publicId="dog" >
  <Transformation width="300" height="300" background="blue" radius="max" crop="fill" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="300" height="300" background="blue" radius="max" crop="fill">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Height(300).Background("blue").Radius("max").Crop("fill")).BuildVideoTag("dog")

The radius parameter can also be used to round the corners of overlays, which are then also given a transparent background. For example, the uploaded mp4 video named dog overlaid on the same video named dog with width set to 100 pixels, maximum radius cropping and north east gravity:

Ruby:
cl_video_tag("dog", :transformation=>[
  {:width=>300, :crop=>"scale"},
  {:overlay=>"video:dog", :width=>100, :gravity=>"north_east", :radius=>"max"}
  ])
PHP:
cl_video_tag("dog", array("transformation"=>array(
  array("width"=>300, "crop"=>"scale"),
  array("overlay"=>"video:dog", "width"=>100, "gravity"=>"north_east", "radius"=>"max")
  )))
Python:
CloudinaryVideo("dog").video(transformation=[
  {"width": 300, "crop": "scale"},
  {"overlay": "video:dog", "width": 100, "gravity": "north_east", "radius": "max"}
  ])
Node.js:
cloudinary.video("dog", {transformation: [
  {width: 300, crop: "scale"},
  {overlay: "video:dog", width: 100, gravity: "north_east", radius: "max"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .overlay("video:dog").width(100).gravity("north_east").radius("max")).videoTag("dog")
JS:
cl.videoTag('dog', {transformation: [
  {width: 300, crop: "scale"},
  {overlay: "video:dog", width: 100, gravity: "north_east", radius: "max"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("dog", {transformation: [
  {width: 300, crop: "scale"},
  {overlay: "video:dog", width: 100, gravity: "north_east", radius: "max"}
  ]})
React:
<Video publicId="dog" >
  <Transformation width="300" crop="scale" />
  <Transformation overlay="video:dog" width="100" gravity="north_east" radius="max" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:dog" width="100" gravity="north_east" radius="max">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Crop("scale").Chain()
  .Overlay("video:dog").Width(100).Gravity("north_east").Radius("max")).BuildVideoTag("dog")

Video settings

The video settings are used for adjusting the video properties of the uploaded file and allow you to manipulate the delivered video file as follows:

Transcoding videos

Transcoding is the direct conversion of one video encoding format to another. Videos can be uploaded to Cloudinary in a variety of formats: mp4, webm, flv, mov, ogv, 3gp, 3g2, wmv, mpeg, flv, mkv or avi. These formats may not necessarily be best suited for web and mobile usage, so these videos can be dynamically converted and normalized to the relevant web formats, and optimized for different web browsers and mobile devices.

Transcoding the video to another format is done by simply specifying the new format as the file extension of the URL (client libraries can also use the format parameter to specify the new format). Cloudinary currently supports transcoding videos to one of the following output formats: MP4, OGV, FLV, WebM (see video_codec in the Video transformations reference table for the default settings for each format). Furthermore, video files can be converted to audio files by stipulating one of the following formats: MP3, OGG, WAV.

For example, transcoding the format of the uploaded mp4 video named dog to WebM format by changing the file extension to .webm:

Ruby:
cl_video_tag("dog")
PHP:
cl_video_tag("dog")
Python:
CloudinaryVideo("dog").video()
Node.js:
cloudinary.video("dog")
Java:
cloudinary.url().videoTag("dog")
JS:
cl.videoTag('dog').toHtml();
jQuery:
$.cloudinary.video("dog")
React:
<Video publicId="dog" >

</Video>
Angular:
<cl-video public-id="dog" >

</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")

cloudinary_url("dog.webm", :resource_type => :video)

Which is equivalent to:

cloudinary_url("dog", :resource_type => :video, :format => "webm").

Another way to transcode the format of an uploaded video is to use the format parameter (f for URLs).

For example, transcoding the uploaded mp4 video named dog to WebM with a parameter:

Ruby:
cl_video_tag("dog", :format=>"webm")
PHP:
cl_video_tag("dog", array("format"=>"webm"))
Python:
CloudinaryVideo("dog").video(format="webm")
Node.js:
cloudinary.video("dog", {format: "webm"})
Java:
cloudinary.url().format("webm").videoTag("dog")
JS:
cl.videoTag('dog', {format: "webm"}).toHtml();
jQuery:
$.cloudinary.video("dog", {format: "webm"})
React:
<Video publicId="dog" format="webm">

</Video>
Angular:
<cl-video public-id="dog" format="webm">

</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Format("webm").BuildVideoTag("dog")

Quality control

Control the video quality with the quality parameter (q in URLs). This parameter represents a mapping between the actual low-level settings of each different video format normalized to a quality value between 1 (lowest) and 100 (highest). Reducing the quality is a tradeoff between visual quality and file size. See video_codec in the Video transformations reference table for the default settings for each format.

For example, reducing the quality of the uploaded mp4 video named dog to 50 results in a file size of 1.1 MB compared to the original file size of 9.8MB:

Ruby:
cl_video_tag("dog", :quality=>50)
PHP:
cl_video_tag("dog", array("quality"=>50))
Python:
CloudinaryVideo("dog").video(quality=50)
Node.js:
cloudinary.video("dog", {quality: 50})
Java:
cloudinary.url().transformation(new Transformation().quality(50)).videoTag("dog")
JS:
cl.videoTag('dog', {quality: 50}).toHtml();
jQuery:
$.cloudinary.video("dog", {quality: 50})
React:
<Video publicId="dog" >
  <Transformation quality="50" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation quality="50">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Quality(50)).BuildVideoTag("dog")

Bitrate control

Use the bit_rate parameter (br in URLs) for advanced control of the video bitrate. This parameter controls the number of bits used to represent the video data. By default, the br_ value uses variable bitrate (VBR), where the specified value indicates the maximum bitrate. The actual bitrate and quality are optimized according to the video content, to conserve bandwidth and storage. You can also specify a constant bitrate value (CBR): br_[value]:constant in URLs. In this case, the specified bitrate will be used even in cases where that high of a rate is not necessary for good quality viewing. When you specify a constant bitrate, the quality parameter is ignored.
Supported codecs: h264, h265 (MPEG-4); vp8, vp9 (WebM).

bit_rate can take one of the following values:

  • An integer e.g. 120000.
  • A string supporting ‘k’ and ‘m’ (kilobits and megabits respectively) e.g. 250k or 2m.

For example, setting the maximum bitrate of the uploaded mp4 video named dog to 250 kilobits (also reducing file size down to ~550 KB):

Ruby:
cl_video_tag("dog", :bit_rate=>"250k")
PHP:
cl_video_tag("dog", array("bit_rate"=>"250k"))
Python:
CloudinaryVideo("dog").video(bit_rate="250k")
Node.js:
cloudinary.video("dog", {bit_rate: "250k"})
Java:
cloudinary.url().transformation(new Transformation().bitRate("250k")).videoTag("dog")
JS:
cl.videoTag('dog', {bit_rate: "250k"}).toHtml();
jQuery:
$.cloudinary.video("dog", {bit_rate: "250k"})
React:
<Video publicId="dog" >
  <Transformation bit_rate="250k" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation bit_rate="250k">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().BitRate("250k")).BuildVideoTag("dog")

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 setting is only needed when delivering the same format as originally uploaded with optimization but without any additional transformations. See video_codec in the Video transformations reference table 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:
    cl_video_tag("dog", :video_codec=>"h264:baseline:3.1")
    PHP:
    cl_video_tag("dog", array("video_codec"=>"h264:baseline:3.1"))
    Python:
    CloudinaryVideo("dog").video(video_codec="h264:baseline:3.1")
    Node.js:
    cloudinary.video("dog", {video_codec: "h264:baseline:3.1"})
    Java:
    cloudinary.url().transformation(new Transformation().videoCodec("h264:baseline:3.1")).videoTag("dog")
    JS:
    cl.videoTag('dog', {video_codec: "h264:baseline:3.1"}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {video_codec: "h264:baseline:3.1"})
    React:
    <Video publicId="dog" >
      <Transformation video_codec="h264:baseline:3.1" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation video_codec="h264:baseline:3.1">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().VideoCodec("h264:baseline:3.1")).BuildVideoTag("dog")

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

    Ruby:
    cl_video_tag("dog", :video_codec=>"auto")
    PHP:
    cl_video_tag("dog", array("video_codec"=>"auto"))
    Python:
    CloudinaryVideo("dog").video(video_codec="auto")
    Node.js:
    cloudinary.video("dog", {video_codec: "auto"})
    Java:
    cloudinary.url().transformation(new Transformation().videoCodec("auto")).videoTag("dog")
    JS:
    cl.videoTag('dog', {video_codec: "auto"}).toHtml();
    jQuery:
    $.cloudinary.video("dog", {video_codec: "auto"})
    React:
    <Video publicId="dog" >
      <Transformation video_codec="auto" />
    </Video>
    Angular:
    <cl-video public-id="dog" >
      <cl-transformation video_codec="auto">
      </cl-transformation>
    </cl-video>
    .Net:
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().VideoCodec("auto")).BuildVideoTag("dog")

Notes:

  • Currently supported for vp9, h264 and 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 or 4.2.

  • Client libraries can optionally enter the parameter as a structure. For example, in Ruby: video_codec: { codec: 'h264', profile: 'baseline', level: '3.1' }

Video Effects

Video effects can be applied to an uploaded video file and allow you to manipulate the delivered video file as follows:

Change video playback speed

Use the accelerate video effect (e_accelerate in URLs) to either speed up or slow down the video playback speed. The effect accepts an integer value between -50 and 100 that determines how to change the playback speed (in percent), with a positive value for speeding up the video, and a negative value for slowing down the video.

For example, the uploaded mp4 video named dog resized to a width of 300 pixels and accelerated by 100% (twice normal speed):

Ruby:
cl_video_tag("dog", :width=>300, :effect=>"accelerate:100", :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>300, "effect"=>"accelerate:100", "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=300, effect="accelerate:100", crop="scale")
Node.js:
cloudinary.video("dog", {width: 300, effect: "accelerate:100", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(300).effect("accelerate:100").crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 300, effect: "accelerate:100", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 300, effect: "accelerate:100", crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="300" effect="accelerate:100" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="300" effect="accelerate:100" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Effect("accelerate:100").Crop("scale")).BuildVideoTag("dog")

Add visual noise

Use the noise video effect (e_noise in URLs) to add visual noise to a video. Noise is a random pattern superimposed on the video, visible as a random flicker of "dots" or "snow". The amount of noise added to the video is set by adding an integer value to the parameter, ranging from 0 (no noise) up to 100.

For example, applying the noise effect with a value of 50 to the mp4 video named dog, resized to a width of 300 pixels:

Ruby:
cl_video_tag("dog", :width=>300, :effect=>"noise:50", :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>300, "effect"=>"noise:50", "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=300, effect="noise:50", crop="scale")
Node.js:
cloudinary.video("dog", {width: 300, effect: "noise:50", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(300).effect("noise:50").crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 300, effect: "noise:50", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 300, effect: "noise:50", crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="300" effect="noise:50" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="300" effect="noise:50" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Effect("noise:50").Crop("scale")).BuildVideoTag("dog")

Remove small motion shifts

The deshake video effect (e_deshake in URLs) applies a filter that attempts to fix small changes in horizontal and vertical motion shift. This filter helps remove camera shake from hand-holding a camera, bumping a tripod, moving on a vehicle, etc. A value between 0-64 can also be specified that determines the maximum extent of movement in the horizontal and/or vertical direction in pixels, with the default set to 16 pixels.

For example, applying the deshake effect with a maximum motion shift of 32 pixels to the mp4 video named dog:

Ruby:
cl_video_tag("dog", :effect=>"deshake:32")
PHP:
cl_video_tag("dog", array("effect"=>"deshake:32"))
Python:
CloudinaryVideo("dog").video(effect="deshake:32")
Node.js:
cloudinary.video("dog", {effect: "deshake:32"})
Java:
cloudinary.url().transformation(new Transformation().effect("deshake:32")).videoTag("dog")
JS:
cl.videoTag('dog', {effect: "deshake:32"}).toHtml();
jQuery:
$.cloudinary.video("dog", {effect: "deshake:32"})
React:
<Video publicId="dog" >
  <Transformation effect="deshake:32" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation effect="deshake:32">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("deshake:32")).BuildVideoTag("dog")

Fade in and out

Use the fade video effect (e_fade in URLs) to either fade in at the beginning of a video or fade out at the end. The effect accepts a parameter that determines the duration of the fade effect in milliseconds, with a positive value for fading in at the beginning of the video, and a negative value for fading out at the end of the video. The fade effect can also be chained to allow for both fading in and then fading out of a video.

For example, applying the fade effect to the mp4 video named dog, first by fading in at the beginning of the video over 2 seconds and then fading out at the end of the video over 4 seconds:

Ruby:
cl_video_tag("dog", :transformation=>[
  {:effect=>"fade:2000"},
  {:effect=>"fade:-4000"}
  ])
PHP:
cl_video_tag("dog", array("transformation"=>array(
  array("effect"=>"fade:2000"),
  array("effect"=>"fade:-4000")
  )))
Python:
CloudinaryVideo("dog").video(transformation=[
  {"effect": "fade:2000"},
  {"effect": "fade:-4000"}
  ])
Node.js:
cloudinary.video("dog", {transformation: [
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("fade:2000").chain()
  .effect("fade:-4000")).videoTag("dog")
JS:
cl.videoTag('dog', {transformation: [
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("dog", {transformation: [
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]})
React:
<Video publicId="dog" >
  <Transformation effect="fade:2000" />
  <Transformation effect="fade:-4000" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation effect="fade:2000">
  </cl-transformation>
  <cl-transformation effect="fade:-4000">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("fade:2000").Chain()
  .Effect("fade:-4000")).BuildVideoTag("dog")

The fade effect is also useful for fading in and out of video overlays. For example, adding an overlay of kitten_fighting scaled to a width of 100 pixels to the mp4 video named dog, that fades in over 3 seconds:

Ruby:
cl_video_tag("dog", :overlay=>"video:kitten_fighting", :effect=>"fade:3000", :width=>100)
PHP:
cl_video_tag("dog", array("overlay"=>"video:kitten_fighting", "effect"=>"fade:3000", "width"=>100))
Python:
CloudinaryVideo("dog").video(overlay="video:kitten_fighting", effect="fade:3000", width=100)
Node.js:
cloudinary.video("dog", {overlay: "video:kitten_fighting", effect: "fade:3000", width: 100})
Java:
cloudinary.url().transformation(new Transformation().overlay("video:kitten_fighting").effect("fade:3000").width(100)).videoTag("dog")
JS:
cl.videoTag('dog', {overlay: "video:kitten_fighting", effect: "fade:3000", width: 100}).toHtml();
jQuery:
$.cloudinary.video("dog", {overlay: "video:kitten_fighting", effect: "fade:3000", width: 100})
React:
<Video publicId="dog" >
  <Transformation overlay="video:kitten_fighting" effect="fade:3000" width="100" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation overlay="video:kitten_fighting" effect="fade:3000" width="100">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Overlay("video:kitten_fighting").Effect("fade:3000").Width(100)).BuildVideoTag("dog")

Blur your video

Use the blur video effect to add a level of blurriness to a video. You can control the strength of the blur with a parameter (range: 1 to 2000). When working with video overlays, you can also add the blur to the container or to the overlay.

For example, the container video plays a blurred version of the video, while a smaller overlay plays the video clearly:

Ruby:
cl_video_tag("dog", :transformation=>[
  {:effect=>"blur:500"},
  {:overlay=>"video:dog", :width=>600},
  {:width=>500, :crop=>"scale"}
  ])
PHP:
cl_video_tag("dog", array("transformation"=>array(
  array("effect"=>"blur:500"),
  array("overlay"=>"video:dog", "width"=>600),
  array("width"=>500, "crop"=>"scale")
  )))
Python:
CloudinaryVideo("dog").video(transformation=[
  {"effect": "blur:500"},
  {"overlay": "video:dog", "width": 600},
  {"width": 500, "crop": "scale"}
  ])
Node.js:
cloudinary.video("dog", {transformation: [
  {effect: "blur:500"},
  {overlay: "video:dog", width: 600},
  {width: 500, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("blur:500").chain()
  .overlay("video:dog").width(600).chain()
  .width(500).crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {transformation: [
  {effect: "blur:500"},
  {overlay: "video:dog", width: 600},
  {width: 500, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("dog", {transformation: [
  {effect: "blur:500"},
  {overlay: "video:dog", width: 600},
  {width: 500, crop: "scale"}
  ]})
React:
<Video publicId="dog" >
  <Transformation effect="blur:500" />
  <Transformation overlay="video:dog" width="600" />
  <Transformation width="500" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation effect="blur:500">
  </cl-transformation>
  <cl-transformation overlay="video:dog" width="600">
  </cl-transformation>
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("blur:500").Chain()
  .Overlay("video:dog").Width(600).Chain()
  .Width(500).Crop("scale")).BuildVideoTag("dog")

Calibrate contrast

Use the contrast video effect (e_contrast in URLs) to either increase or decrease the contrast level in a video. Contrast is determined by the difference in brightness and color that makes objects within the video distinguishable from other objects within the same video. The contrast level can be decreased down to -300 or increased up to +100, with a default level of 0.

For example, applying the contrast effect to the mp4 video named dog, by increasing the contrast level by 50:

Ruby:
cl_video_tag("dog", :width=>500, :effect=>"contrast:50", :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>500, "effect"=>"contrast:50", "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=500, effect="contrast:50", crop="scale")
Node.js:
cloudinary.video("dog", {width: 500, effect: "contrast:50", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(500).effect("contrast:50").crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 500, effect: "contrast:50", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 500, effect: "contrast:50", crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="500" effect="contrast:50" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="500" effect="contrast:50" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(500).Effect("contrast:50").Crop("scale")).BuildVideoTag("dog")

Control brightness

Use the brightness video effect (e_brightness in URLs) to either increase or decrease the brightness level in a video. Brightness determines how much the objects in a video appear to be radiating light. The brightness level can be decreased down to -100 or increased up to +100, with a default level of 0.

For example, applying the brightness effect to the mp4 video named dog, by increasing the brightness level by 30:

Ruby:
cl_video_tag("dog", :width=>500, :effect=>"brightness:30", :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>500, "effect"=>"brightness:30", "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=500, effect="brightness:30", crop="scale")
Node.js:
cloudinary.video("dog", {width: 500, effect: "brightness:30", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(500).effect("brightness:30").crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 500, effect: "brightness:30", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 500, effect: "brightness:30", crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="500" effect="brightness:30" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="500" effect="brightness:30" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(500).Effect("brightness:30").Crop("scale")).BuildVideoTag("dog")

Balance saturation

Use the saturation video effect (e_saturation in URLs) to either increase or decrease the saturation level in a video. Saturation determines the colorfulness of objects relative to their brightness. The saturation level can be decreased down to -200 or increased up to +100, with a default level of 0.

For example, applying the saturation effect to the mp4 video named dog, by decreasing the saturation level by -50:

Ruby:
cl_video_tag("dog", :width=>500, :effect=>"saturation:-50", :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>500, "effect"=>"saturation:-50", "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=500, effect="saturation:-50", crop="scale")
Node.js:
cloudinary.video("dog", {width: 500, effect: "saturation:-50", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(500).effect("saturation:-50").crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 500, effect: "saturation:-50", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 500, effect: "saturation:-50", crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="500" effect="saturation:-50" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="500" effect="saturation:-50" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(500).Effect("saturation:-50").Crop("scale")).BuildVideoTag("dog")

Regulate gamma

Use the gamma video effect (e_gamma in URLs) to either increase or decrease the gamma level in a video. Gamma determines the relative luminance of objects within the video. The gamma level can be decreased down to a -100 or increased up to +100, with a default level of 0.

For example, applying the gamma effect to the mp4 video named dog, by decreasing the gamma level to -20:

Ruby:
cl_video_tag("dog", :width=>500, :effect=>"gamma:-20", :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>500, "effect"=>"gamma:-20", "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=500, effect="gamma:-20", crop="scale")
Node.js:
cloudinary.video("dog", {width: 500, effect: "gamma:-20", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(500).effect("gamma:-20").crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 500, effect: "gamma:-20", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 500, effect: "gamma:-20", crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="500" effect="gamma:-20" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="500" effect="gamma:-20" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(500).Effect("gamma:-20").Crop("scale")).BuildVideoTag("dog")

Apply vignette

Use the vignette video effect (e_vignette in URLs) to apply a vignette filter to a video. The vignette filter creates an effect where the video is clear in the center and fades out towards the edges. The vignette effect parameter accepts a value between 0 and 100 to determine how quickly the video fades out from a clear center.

For example, applying the vignette effect with a level of 50 to the mp4 video named dog:

Ruby:
cl_video_tag("dog", :width=>500, :effect=>"vignette:50", :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>500, "effect"=>"vignette:50", "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=500, effect="vignette:50", crop="scale")
Node.js:
cloudinary.video("dog", {width: 500, effect: "vignette:50", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(500).effect("vignette:50").crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 500, effect: "vignette:50", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 500, effect: "vignette:50", crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="500" effect="vignette:50" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="500" effect="vignette:50" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(500).Effect("vignette:50").Crop("scale")).BuildVideoTag("dog")

Adjust volume

Control the audio volume of a video with the volume effect parameter (e_volume in URLs). This parameter represents a percentage of the original volume and can take a value between -100 (no audio) to +400, with a default of 0.

For example, increasing the volume in the mp4 video named dog by 50%:

Ruby:
cl_video_tag("dog", :width=>500, :effect=>"volume:50", :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>500, "effect"=>"volume:50", "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=500, effect="volume:50", crop="scale")
Node.js:
cloudinary.video("dog", {width: 500, effect: "volume:50", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(500).effect("volume:50").crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 500, effect: "volume:50", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 500, effect: "volume:50", crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="500" effect="volume:50" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="500" effect="volume:50" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(500).Effect("volume:50").Crop("scale")).BuildVideoTag("dog")

Reverse playback

Use the reverse effect (e_reverse in URLs) to play a video or audio file backwards.

For example, in the following reversed video, you can watch a woman un-sketch her phone design:

Ruby:
cl_video_tag("pencil_sketch", :width=>500, :effect=>"reverse", :crop=>"scale")
PHP:
cl_video_tag("pencil_sketch", array("width"=>500, "effect"=>"reverse", "crop"=>"scale"))
Python:
CloudinaryVideo("pencil_sketch").video(width=500, effect="reverse", crop="scale")
Node.js:
cloudinary.video("pencil_sketch", {width: 500, effect: "reverse", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(500).effect("reverse").crop("scale")).videoTag("pencil_sketch")
JS:
cl.videoTag('pencil_sketch', {width: 500, effect: "reverse", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("pencil_sketch", {width: 500, effect: "reverse", crop: "scale"})
React:
<Video publicId="pencil_sketch" >
  <Transformation width="500" effect="reverse" crop="scale" />
</Video>
Angular:
<cl-video public-id="pencil_sketch" >
  <cl-transformation width="500" effect="reverse" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(500).Effect("reverse").Crop("scale")).BuildVideoTag("pencil_sketch")

Tip: Play the video in both directions by splicing a reversed version of the video after the original.

Control video looping

Use the loop effect (e_loop in URLs) to deliver a video that loops a specified number of times. The loop parameter value indicates the number of times the video repeats (after the initial run). For example, if you want to deliver a video that plays a total of 3 times in a row, set the loop value to 2.

Note: This parameter differs from the loop attribute of the HTML5 tag, which instructs the video player to play the delivered video in an infinite loop.

For example, delivering a video that contains 3 iterations of the ski_jump video. The original video is 5 seconds long. This delivered video is 15 seconds:

Ruby:
cl_video_tag("ski_jump", :effect=>"loop:2")
PHP:
cl_video_tag("ski_jump", array("effect"=>"loop:2"))
Python:
CloudinaryVideo("ski_jump").video(effect="loop:2")
Node.js:
cloudinary.video("ski_jump", {effect: "loop:2"})
Java:
cloudinary.url().transformation(new Transformation().effect("loop:2")).videoTag("ski_jump")
JS:
cl.videoTag('ski_jump', {effect: "loop:2"}).toHtml();
jQuery:
$.cloudinary.video("ski_jump", {effect: "loop:2"})
React:
<Video publicId="ski_jump" >
  <Transformation effect="loop:2" />
</Video>
Angular:
<cl-video public-id="ski_jump" >
  <cl-transformation effect="loop:2">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("loop:2")).BuildVideoTag("ski_jump")

Audio settings

The audio settings are used for adjusting the audio properties of the file and allow you to manipulate the delivered video file as follows:

Audio frequency control

Use the audio_frequency parameter (af in URLs) to control the audio sampling frequency. This parameter represents an integer value in Hz. See audio_frequency in the Video transformations reference table for the possible values.

For example, setting the audio frequency to 22050 Hz in the uploaded mp4 video named dog:

Ruby:
cl_video_tag("dog", :audio_frequency=>"22050")
PHP:
cl_video_tag("dog", array("audio_frequency"=>"22050"))
Python:
CloudinaryVideo("dog").video(audio_frequency="22050")
Node.js:
cloudinary.video("dog", {audio_frequency: "22050"})
Java:
cloudinary.url().transformation(new Transformation().audioFrequency("22050")).videoTag("dog")
JS:
cl.videoTag('dog', {audio_frequency: "22050"}).toHtml();
jQuery:
$.cloudinary.video("dog", {audio_frequency: "22050"})
React:
<Video publicId="dog" >
  <Transformation audio_frequency="22050" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation audio_frequency="22050">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AudioFrequency("22050")).BuildVideoTag("dog")

Audio codec settings

Use the audio_codec parameter (ac in URLs) to set the audio codec or remove the audio channel completely as follows:

  • none removes the audio channel
  • aac (mp4 or flv only)
  • vorbis (ogv or webm only)
  • mp3 (mp4 or flv only)

For example, removing the audio channel from the uploaded mp4 video named dog:

Ruby:
cl_video_tag("dog", :audio_codec=>"none")
PHP:
cl_video_tag("dog", array("audio_codec"=>"none"))
Python:
CloudinaryVideo("dog").video(audio_codec="none")
Node.js:
cloudinary.video("dog", {audio_codec: "none"})
Java:
cloudinary.url().transformation(new Transformation().audioCodec("none")).videoTag("dog")
JS:
cl.videoTag('dog', {audio_codec: "none"}).toHtml();
jQuery:
$.cloudinary.video("dog", {audio_codec: "none"})
React:
<Video publicId="dog" >
  <Transformation audio_codec="none" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation audio_codec="none">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AudioCodec("none")).BuildVideoTag("dog")

Generating video thumbnails

Cloudinary makes it easy to deliver image thumbnails of any frame within an uploaded video by simply specifying the image format needed as the file extension of the URL (e.g. jpg, png, webp, wdp).

For example, generating a JPG image thumbnail URL of the uploaded mp4 video named dog:

Ruby:
cl_image_tag("dog.jpg", :resource_type=>"video")
PHP:
cl_image_tag("dog.jpg", array("resource_type"=>"video"))
Python:
CloudinaryVideo("dog.jpg").image()
Node.js:
cloudinary.image("dog.jpg", {resource_type: "video"})
Java:
cloudinary.url().resourceType("video").imageTag("dog.jpg")
JS:
cl.videoTag('dog.jpg').toHtml();
jQuery:
$.cloudinary.image("dog.jpg", {resource_type: "video"})
React:
<Video publicId="dog.jpg" resource_type="video">

</Video>
Angular:
<cl-video public-id="dog.jpg" resource_type="video">

</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.BuildImageTag("dog.jpg")
JPG thumbnail from dog.mp4

To control which frame is captured from the video as a thumbnail (the middle frame is selected by default), use the start_offset parameter (so in URLs) with one of the following values:

  • A float representing the time in seconds from the beginning of the video e.g. 5.44.
  • A string representing the percentage of the video from the beginning. This string consists of a number with a p appended e.g. 35p (0p is the first frame and 100p is the last frame). The client libraries also support appending a % instead of a p.
  • A value of auto which automatically selects a frame that best matches the average value of a color distribution analysis of the first few seconds of the video, making it more likely to display a typical frame.

For example, generating a JPG image thumbnail of the frame at 8.5 seconds in the uploaded mp4 video named dog:

Ruby:
cl_image_tag("dog.jpg", :start_offset=>"8.5", :resource_type=>"video")
PHP:
cl_image_tag("dog.jpg", array("start_offset"=>"8.5", "resource_type"=>"video"))
Python:
CloudinaryVideo("dog.jpg").image(start_offset="8.5")
Node.js:
cloudinary.image("dog.jpg", {start_offset: "8.5", resource_type: "video"})
Java:
cloudinary.url().transformation(new Transformation().startOffset("8.5")).resourceType("video").imageTag("dog.jpg")
JS:
cl.videoTag('dog.jpg', {start_offset: "8.5"}).toHtml();
jQuery:
$.cloudinary.image("dog.jpg", {start_offset: "8.5", resource_type: "video"})
React:
<Video publicId="dog.jpg" resource_type="video">
  <Transformation start_offset="8.5" />
</Video>
Angular:
<cl-video public-id="dog.jpg" resource_type="video">
  <cl-transformation start_offset="8.5">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().StartOffset("8.5")).BuildImageTag("dog.jpg")
JPG thumbnail of dog.mp4 at 5.5 seconds

Once generated, the thumbnail image supports further manipulation as any other image (see image transformations for more details).

For example, generating a cropped JPG image thumbnail with a width and height of 350 pixels, of the frame at 4 seconds in the uploaded mp4 video named dog. The image is also rendered in gray scale, with rounded corners and a 5 pixel wide black border:

Ruby:
cl_image_tag("dog.jpg", :start_offset=>"4", :width=>350, :height=>350, :radius=>20, :effect=>"grayscale", :border=>"5px_solid_black", :crop=>"crop", :resource_type=>"video")
PHP:
cl_image_tag("dog.jpg", array("start_offset"=>"4", "width"=>350, "height"=>350, "radius"=>20, "effect"=>"grayscale", "border"=>"5px_solid_black", "crop"=>"crop", "resource_type"=>"video"))
Python:
CloudinaryVideo("dog.jpg").image(start_offset="4", width=350, height=350, radius=20, effect="grayscale", border="5px_solid_black", crop="crop")
Node.js:
cloudinary.image("dog.jpg", {start_offset: "4", width: 350, height: 350, radius: 20, effect: "grayscale", border: "5px_solid_black", crop: "crop", resource_type: "video"})
Java:
cloudinary.url().transformation(new Transformation().startOffset("4").width(350).height(350).radius(20).effect("grayscale").border("5px_solid_black").crop("crop")).resourceType("video").imageTag("dog.jpg")
JS:
cl.videoTag('dog.jpg', {start_offset: "4", width: 350, height: 350, radius: 20, effect: "grayscale", border: "5px_solid_black", crop: "crop"}).toHtml();
jQuery:
$.cloudinary.image("dog.jpg", {start_offset: "4", width: 350, height: 350, radius: 20, effect: "grayscale", border: "5px_solid_black", crop: "crop", resource_type: "video"})
React:
<Video publicId="dog.jpg" resource_type="video">
  <Transformation start_offset="4" width="350" height="350" radius="20" effect="grayscale" border="5px_solid_black" crop="crop" />
</Video>
Angular:
<cl-video public-id="dog.jpg" resource_type="video">
  <cl-transformation start_offset="4" width="350" height="350" radius="20" effect="grayscale" border="5px_solid_black" crop="crop">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().StartOffset("4").Width(350).Height(350).Radius(20).Effect("grayscale").Border("5px_solid_black").Crop("crop")).BuildImageTag("dog.jpg")
300x300 JPG thumbnail of dog.mp4 at 4 seconds

Generate waveform images

You can create audio waveform images from audio or video files just as easily as you can create thumbnails for images and videos, with fine control over the look & feel of the generated waveform image.

This section is divided into the following subsections:

Creating waveform images

To create a waveform image from an audio or video file uploaded to your Cloudinary account, change the file extension (format) of the Cloudinary delivery URL to any image format (e.g., PNG) and enable the waveform flag (fl_waveform in URLs). By default, the resulting waveform image is delivered with a very high resolution, so you will probably also want to scale down the resulting image.

For example, to generate a PNG waveform image from the audio track of the dog.mp4 video file uploaded to Cloudinary's demo account, scaled to a height of 200 pixels and a width of 500 pixels:

Ruby:
cl_image_tag("dog.png", :height=>200, :width=>500, :flags=>"waveform", :resource_type=>"video")
PHP:
cl_image_tag("dog.png", array("height"=>200, "width"=>500, "flags"=>"waveform", "resource_type"=>"video"))
Python:
CloudinaryVideo("dog.png").image(height=200, width=500, flags="waveform")
Node.js:
cloudinary.image("dog.png", {height: 200, width: 500, flags: "waveform", resource_type: "video"})
Java:
cloudinary.url().transformation(new Transformation().height(200).width(500).flags("waveform")).resourceType("video").imageTag("dog.png")
JS:
cl.videoTag('dog.png', {height: 200, width: 500, flags: "waveform"}).toHtml();
jQuery:
$.cloudinary.image("dog.png", {height: 200, width: 500, flags: "waveform", resource_type: "video"})
React:
<Video publicId="dog.png" resource_type="video">
  <Transformation height="200" width="500" flags="waveform" />
</Video>
Angular:
<cl-video public-id="dog.png" resource_type="video">
  <cl-transformation height="200" width="500" flags="waveform">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(200).Width(500).Flags("waveform")).BuildImageTag("dog.png")
Video waveform image of 500x200

Customizing the waveform image

You can also control the colors used in the waveform image with the color parameter (co in URLs) to set the color for the waveform (default white) and the background parameter (b in URLs) to set the background color of the image (default black). You can create waveforms with a transparent background by setting the background parameter to transparent or none (b_transparent or b_none in URLs).

For example, to generate the same PNG waveform image from the audio track of the dog.mp4 video file in the example above in inverted colors - with the waveform rendered in black on a white background:

Ruby:
cl_image_tag("dog.png", :height=>200, :width=>500, :flags=>"waveform", :color=>"black", :background=>"white", :resource_type=>"video")
PHP:
cl_image_tag("dog.png", array("height"=>200, "width"=>500, "flags"=>"waveform", "color"=>"black", "background"=>"white", "resource_type"=>"video"))
Python:
CloudinaryVideo("dog.png").image(height=200, width=500, flags="waveform", color="black", background="white")
Node.js:
cloudinary.image("dog.png", {height: 200, width: 500, flags: "waveform", color: "black", background: "white", resource_type: "video"})
Java:
cloudinary.url().transformation(new Transformation().height(200).width(500).flags("waveform").color("black").background("white")).resourceType("video").imageTag("dog.png")
JS:
cl.videoTag('dog.png', {height: 200, width: 500, flags: "waveform", color: "black", background: "white"}).toHtml();
jQuery:
$.cloudinary.image("dog.png", {height: 200, width: 500, flags: "waveform", color: "black", background: "white", resource_type: "video"})
React:
<Video publicId="dog.png" resource_type="video">
  <Transformation height="200" width="500" flags="waveform" color="black" background="white" />
</Video>
Angular:
<cl-video public-id="dog.png" resource_type="video">
  <cl-transformation height="200" width="500" flags="waveform" color="black" background="white">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(200).Width(500).Flags("waveform").Color("black").Background("white")).BuildImageTag("dog.png")
Black on white waveform image

If you want to capture the waveform of a specific segment of the audio file, you can select from the following parameters to specify the section of the file to sample for the waveform:

  • start_offset (so in URLs) specifies the start of the sample.
  • end_offset (eo in URLs) specifies the end of the sample.
  • duration (du in URLs) specifies the duration of the sample.

For example, to display a PNG waveform image of a sample from the 2 second mark until the 4 second mark of the dog.mp4 video file uploaded to Cloudinary's demo account, scaled to a height of 250 pixels and a width of 400 pixels, with the waveform rendered in blue on a transparent background:

Ruby:
cl_image_tag("dog.png", :height=>250, :width=>400, :flags=>"waveform", :start_offset=>"2", :end_offset=>"4", :color=>"blue", :background=>"transparent", :resource_type=>"video")
PHP:
cl_image_tag("dog.png", array("height"=>250, "width"=>400, "flags"=>"waveform", "start_offset"=>"2", "end_offset"=>"4", "color"=>"blue", "background"=>"transparent", "resource_type"=>"video"))
Python:
CloudinaryVideo("dog.png").image(height=250, width=400, flags="waveform", start_offset="2", end_offset="4", color="blue", background="transparent")
Node.js:
cloudinary.image("dog.png", {height: 250, width: 400, flags: "waveform", start_offset: "2", end_offset: "4", color: "blue", background: "transparent", resource_type: "video"})
Java:
cloudinary.url().transformation(new Transformation().height(250).width(400).flags("waveform").startOffset("2").endOffset("4").color("blue").background("transparent")).resourceType("video").imageTag("dog.png")
JS:
cl.videoTag('dog.png', {height: 250, width: 400, flags: "waveform", start_offset: "2", end_offset: "4", color: "blue", background: "transparent"}).toHtml();
jQuery:
$.cloudinary.image("dog.png", {height: 250, width: 400, flags: "waveform", start_offset: "2", end_offset: "4", color: "blue", background: "transparent", resource_type: "video"})
React:
<Video publicId="dog.png" resource_type="video">
  <Transformation height="250" width="400" flags="waveform" start_offset="2" end_offset="4" color="blue" background="transparent" />
</Video>
Angular:
<cl-video public-id="dog.png" resource_type="video">
  <cl-transformation height="250" width="400" flags="waveform" start_offset="2" end_offset="4" color="blue" background="transparent">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(250).Width(400).Flags("waveform").StartOffset("2").EndOffset("4").Color("blue").Background("transparent")).BuildImageTag("dog.png")
Waveform of a partial video with color customization

The generated image waveforms can be further manipulated to match any graphic design and any responsive layout, just like any other image uploaded to Cloudinary.

Adding image overlays

Add an overlay image over the video with the overlay parameter (l in URLs) and the public ID of a previously uploaded PNG image (e.g. l_watermark for an image with the public ID of watermark). You can determine the dimension and position of the overlay using the width, height, x, y and gravity parameters the same way as used for images (see Adding watermarks, credits, badges and text overlays to images for more details). Furthermore, it is possible to control when the overlay is displayed by using any combination of the 3 offset parameters (see Trimming videos for more information on the parameters and their possible values). The overlay can also be further manipulated like any other image uploaded to Cloudinary

For example, adding an overlay of a PNG image called cloudinary_icon to the mp4 video named dog, that appears after 6.5 seconds and disappears at the 10 second mark. The overlay is also made into a watermark by reducing the opacity to 50 using the o parameter and increasing the brightness to 200% using the e_brightness effect:

Ruby:
cl_video_tag("dog", :overlay=>"cloudinary_icon", :start_offset=>"6.5", :end_offset=>"10", :opacity=>50, :effect=>"brightness:200")
PHP:
cl_video_tag("dog", array("overlay"=>"cloudinary_icon", "start_offset"=>"6.5", "end_offset"=>"10", "opacity"=>50, "effect"=>"brightness:200"))
Python:
CloudinaryVideo("dog").video(overlay="cloudinary_icon", start_offset="6.5", end_offset="10", opacity=50, effect="brightness:200")
Node.js:
cloudinary.video("dog", {overlay: "cloudinary_icon", start_offset: "6.5", end_offset: "10", opacity: 50, effect: "brightness:200"})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon").startOffset("6.5").endOffset("10").opacity(50).effect("brightness:200")).videoTag("dog")
JS:
cl.videoTag('dog', {overlay: "cloudinary_icon", start_offset: "6.5", end_offset: "10", opacity: 50, effect: "brightness:200"}).toHtml();
jQuery:
$.cloudinary.video("dog", {overlay: "cloudinary_icon", start_offset: "6.5", end_offset: "10", opacity: 50, effect: "brightness:200"})
React:
<Video publicId="dog" >
  <Transformation overlay="cloudinary_icon" start_offset="6.5" end_offset="10" opacity="50" effect="brightness:200" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation overlay="cloudinary_icon" start_offset="6.5" end_offset="10" opacity="50" effect="brightness:200">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Overlay("cloudinary_icon").StartOffset("6.5").EndOffset("10").Opacity(50).Effect("brightness:200")).BuildVideoTag("dog")

Adding video overlays

Add another video as an overlay over the container video by using the overlay video parameter (l_video: in URLs) and the public ID of a previously uploaded video (e.g. l_video:dog for a video with the public ID of dog). You can determine the dimension and position of the video overlay using the width, height, x, y and gravity parameters the same way as used for images (see Adding image overlays for more details). Furthermore, it is possible to control when the video overlay is displayed by using any combination of the 3 offset parameters (see Trimming videos for more information on the parameters and their possible values). The overlay can also be further manipulated like any other video uploaded to Cloudinary.

For example, adding an overlay of a video named dog to the same mp4 video named dog, that appears after 4.5 seconds and disappears at the 8 second mark. The overlay is also rotated by 90 degrees, set with a gravity of 'east' and scaled to a width of 200 pixels.

Ruby:
cl_video_tag("dog", :overlay=>"video:dog", :start_offset=>"4.5", :end_offset=>"8", :angle=>90, :width=>200, :gravity=>"east")
PHP:
cl_video_tag("dog", array("overlay"=>"video:dog", "start_offset"=>"4.5", "end_offset"=>"8", "</