Cloudinary Blog

Video transcoding, resizing, cropping and manipulating made easy

By Meir Feinberg Sep 02, 2015

Cloud-Based Video Delivery and Transcoding Made Easy

Videos are becoming more prolific with people having the capability to capture videos with a wide variety of cameras, including smartphone cameras that are available almost everywhere. Web and mobile applications that display videos online can be faced with a challenge when the videos are created or uploaded from different devices and in various formats, and then need to be delivered in a multitude of resolutions and aspect ratios to various web browsers, laptops and all kinds of mobile devices in HTML5 web friendly video formats.

On top of that, the videos may need to be further manipulated to fit the graphic design of the web application, whether that entails cropping, resizing, rotating, trimming, adding overlays, or even applying filters and various effects.

Developing and then supporting the backend required to transform videos from hi-res originals to HTML5 web friendly video formats that fit the graphic design of your application is a non-trivial technical process that requires considerable computational power. There are also many advanced tuning properties related to video encoding in the trade off between visual quality and file size, and doing this correctly can save a lot of bandwidth and load videos faster. Many developers spend considerable time building in-house solutions to support online videos.

Cloudinary offers a solution to all your development needs with:

No need to install any complex software - all video processing takes place in the cloud, together with an Interactive Media Library for browsing through your media files and SDKs for all popular web and mobile development frameworks for easy integration with HTML5 sites and mobile apps.
No need to learn how to fine tune video creation - all the best practices are already automatically applied with conversion to all formats (MP4, WebM, OGV, FLV) for optimized viewing on all web browsers and mobile devices, improving your website's loading speed while reducing your bandwidth requirements and IT costs.
No need to write complex code for video processing - all code is already available as a service with a URL based API for video transcoding and manipulation.
No need to deploy servers for video processing - it's a hosted solution.
No need to pre-generate all video manipulations - video transformations are done on the fly, streamed via a CDN.

Cloud-based video manipulation

Manipulating videos to fit the graphic design of the web application doesn't need to be complicated and hard to implement even if the video needs to be delivered in different sizes, formats and resolutions while supporting all the different web browsers, laptops and mobile devices. Cloudinary's rich set of video manipulation capabilities include: resizing and cropping, rotating, modifying quality, adjusting video codec settings, controlling bit rate, video trimming, thumbnail generation, conversion to animated GIF, adding text, image and video overlays, special effects and lots more. Videos are delivered using dynamic URLs with on-the-fly transcoding and real-time manipulation while streaming the video content via a worldwide CDN with streaming support for the best performance.

The following are some examples of manipulating a video called funny_dog that was uploaded to Cloudinary.

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/funny_dog.mp4

Ruby:

cl_video_tag("funny_dog")

PHP v1:

cl_video_tag("funny_dog")

PHP v2:

(new VideoTag('funny_dog.mp4'));

Python:

CloudinaryVideo("funny_dog").video()

Node.js:

cloudinary.video("funny_dog")

Java:

cloudinary.url().videoTag("funny_dog");

JS:

cloudinary.videoTag('funny_dog').toHtml();

jQuery:

$.cloudinary.video("funny_dog")

React:

<Video publicId="funny_dog" >

</Video>

Vue.js:

<cld-video publicId="funny_dog" >

</cld-video>

Angular:

<cl-video public-id="funny_dog" >

</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.BuildVideoTag("funny_dog")

Android:

MediaManager.get().url().resourceType("video").generate("funny_dog.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").generate("funny_dog.mp4")

Video resizing and cropping

Resize the video to a width of 200 pixels and a height of 150 pixels using the fill cropping mode and focusing on the bottom of the video in the case that only a portion of the video is used:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/w_200,h_150,c_fill,g_south/funny_dog.mp4

Ruby:

cl_video_tag("funny_dog", :width=>200, :height=>150, :gravity=>"south", :crop=>"fill")

PHP v1:

cl_video_tag("funny_dog", array("width"=>200, "height"=>150, "gravity"=>"south", "crop"=>"fill"))

PHP v2:

(new VideoTag('funny_dog.mp4'))
  ->resize(Resize::fill()->width(200)->height(150)
    ->gravity(Gravity::compass(Compass::south())));

Python:

CloudinaryVideo("funny_dog").video(width=200, height=150, gravity="south", crop="fill")

Node.js:

cloudinary.video("funny_dog", {width: 200, height: 150, gravity: "south", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(150).gravity("south").crop("fill")).videoTag("funny_dog");

JS:

cloudinary.videoTag('funny_dog', {width: 200, height: 150, gravity: "south", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.video("funny_dog", {width: 200, height: 150, gravity: "south", crop: "fill"})

React:

<Video publicId="funny_dog" >
  <Transformation width="200" height="150" gravity="south" crop="fill" />
</Video>

Vue.js:

<cld-video publicId="funny_dog" >
  <cld-transformation width="200" height="150" gravity="south" crop="fill" />
</cld-video>

Angular:

<cl-video public-id="funny_dog" >
  <cl-transformation width="200" height="150" gravity="south" crop="fill">
  </cl-transformation>
</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(200).Height(150).Gravity("south").Crop("fill")).BuildVideoTag("funny_dog")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(150).gravity("south").crop("fill")).resourceType("video").generate("funny_dog.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(200).setHeight(150).setGravity("south").setCrop("fill")).generate("funny_dog.mp4")

Resize the video to a width of 300 pixels and a height of 200 pixels using the pad cropping mode and use a blue background in the case that the video needs padding:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/w_300,h_200,c_pad,b_rgb:0e4167/funny_dog.mp4

Ruby:

cl_video_tag("funny_dog", :width=>300, :height=>200, :background=>"#0e4167", :crop=>"pad")

PHP v1:

cl_video_tag("funny_dog", array("width"=>300, "height"=>200, "background"=>"#0e4167", "crop"=>"pad"))

PHP v2:

(new VideoTag('funny_dog.mp4'))
  ->resize(Resize::pad()->width(300)->height(200)
    ->background(Background::color(Color::rgb('0e4167'))));

Python:

CloudinaryVideo("funny_dog").video(width=300, height=200, background="#0e4167", crop="pad")

Node.js:

cloudinary.video("funny_dog", {width: 300, height: 200, background: "#0e4167", crop: "pad"})

Java:

cloudinary.url().transformation(new Transformation().width(300).height(200).background("#0e4167").crop("pad")).videoTag("funny_dog");

JS:

cloudinary.videoTag('funny_dog', {width: 300, height: 200, background: "#0e4167", crop: "pad"}).toHtml();

jQuery:

$.cloudinary.video("funny_dog", {width: 300, height: 200, background: "#0e4167", crop: "pad"})

React:

<Video publicId="funny_dog" >
  <Transformation width="300" height="200" background="#0e4167" crop="pad" />
</Video>

Vue.js:

<cld-video publicId="funny_dog" >
  <cld-transformation width="300" height="200" background="#0e4167" crop="pad" />
</cld-video>

Angular:

<cl-video public-id="funny_dog" >
  <cl-transformation width="300" height="200" background="#0e4167" crop="pad">
  </cl-transformation>
</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Height(200).Background("#0e4167").Crop("pad")).BuildVideoTag("funny_dog")

Android:

MediaManager.get().url().transformation(new Transformation().width(300).height(200).background("#0e4167").crop("pad")).resourceType("video").generate("funny_dog.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(300).setHeight(200).setBackground("#0e4167").setCrop("pad")).generate("funny_dog.mp4")

Video overlays, trimming, transcoding and more

Scale the width to 300 pixels, the height to 200 pixels, set the quality to 40 and add an overlay saying "Funny Dog" in Roboto 30px white text starting at the 3 second mark and 10 pixels from the bottom of the video:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/w_300,h_200,q_40/l_text:Roboto_30px_bold:Funny Dog,co_white,g_south,y_10,so_3/funny_dog.mp4

Ruby:

cl_video_tag("funny_dog", :transformation=>[
  {:width=>300, :height=>200, :quality=>40, :crop=>"scale"},
  {:overlay=>{:font_family=>"Roboto", :font_size=>30, :font_weight=>"bold", :text=>"Funny%20Dog"}, :color=>"white", :gravity=>"south", :y=>10, :start_offset=>"3"}
  ])

PHP v1:

cl_video_tag("funny_dog", array("transformation"=>array(
  array("width"=>300, "height"=>200, "quality"=>40, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Roboto", "font_size"=>30, "font_weight"=>"bold", "text"=>"Funny%20Dog"), "color"=>"white", "gravity"=>"south", "y"=>10, "start_offset"=>"3")
  )))

PHP v2:

(new VideoTag('funny_dog.mp4'))
  ->resize(Resize::scale()->width(300)->height(200))
  ->delivery(Delivery::quality(40))
  ->overlay(
      Overlay::source(
          Source::text('Funny Dog', (new TextStyle('Roboto', 30))
            ->fontWeight(FontWeight::bold()))
          ->textColor(Color::WHITE))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::south()))
          ->offsetY(10))
        ->timeline(Timeline::position()->startOffset(3))
      
      );

Python:

CloudinaryVideo("funny_dog").video(transformation=[
  {'width': 300, 'height': 200, 'quality': 40, 'crop': "scale"},
  {'overlay': {'font_family': "Roboto", 'font_size': 30, 'font_weight': "bold", 'text': "Funny%20Dog"}, 'color': "white", 'gravity': "south", 'y': 10, 'start_offset': "3"}
  ])

Node.js:

cloudinary.video("funny_dog", {transformation: [
  {width: 300, height: 200, quality: 40, crop: "scale"},
  {overlay: {font_family: "Roboto", font_size: 30, font_weight: "bold", text: "Funny%20Dog"}, color: "white", gravity: "south", y: 10, start_offset: "3"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(300).height(200).quality(40).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Roboto").fontSize(30).fontWeight("bold").text("Funny%20Dog")).color("white").gravity("south").y(10).startOffset("3")).videoTag("funny_dog");

JS:

cloudinary.videoTag('funny_dog', {transformation: [
  {width: 300, height: 200, quality: 40, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Roboto").fontSize(30).fontWeight("bold").text("Funny%20Dog"), color: "white", gravity: "south", y: 10, startOffset: "3"}
  ]}).toHtml();

jQuery:

$.cloudinary.video("funny_dog", {transformation: [
  {width: 300, height: 200, quality: 40, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Roboto").fontSize(30).fontWeight("bold").text("Funny%20Dog"), color: "white", gravity: "south", y: 10, start_offset: "3"}
  ]})

React:

<Video publicId="funny_dog" >
  <Transformation width="300" height="200" quality="40" crop="scale" />
  <Transformation overlay={{fontFamily: "Roboto", fontSize: 30, fontWeight: "bold", text: "Funny%20Dog"}} color="white" gravity="south" y="10" startOffset="3" />
</Video>

Vue.js:

<cld-video publicId="funny_dog" >
  <cld-transformation width="300" height="200" quality="40" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Roboto', fontSize: 30, fontWeight: 'bold', text: 'Funny%20Dog'}" color="white" gravity="south" y="10" startOffset="3" />
</cld-video>

Angular:

<cl-video public-id="funny_dog" >
  <cl-transformation width="300" height="200" quality="40" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Roboto_30px_bold:Funny%20Dog" color="white" gravity="south" y="10" start-offset="3">
  </cl-transformation>
</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Height(200).Quality(40).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Roboto").FontSize(30).FontWeight("bold").Text("Funny%20Dog")).Color("white").Gravity("south").Y(10).StartOffset("3")).BuildVideoTag("funny_dog")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(300).height(200).quality(40).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Roboto").fontSize(30).fontWeight("bold").text("Funny%20Dog")).color("white").gravity("south").y(10).startOffset("3")).resourceType("video").generate("funny_dog.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(300).setHeight(200).setQuality(40).setCrop("scale").chain()
  .setOverlay("text:Roboto_30px_bold:Funny%20Dog").setColor("white").setGravity("south").setY(10).setStartOffset("3")).generate("funny_dog.mp4")

Transcode the video to the webm format and apply the best codec settings for web viewing with the vc_auto parameter, add the cloudinary_icon image overlay with a width of 160 pixels and 10 pixels from the northeast corner with a brightness of 200% and an opacity of 70%, and adjust the total width to 350 pixels and the height to 150 pixels while padding with a blue background:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/vc_auto/l_cloudinary_icon,g_north_east,e_brightness:200,o_70,x_10,y_10,w_160/w_350,h_150,c_pad,b_rgb:0e4167/funny_dog.webm

Ruby:

cl_video_tag("funny_dog", :transformation=>[
  {:video_codec=>"auto"},
  {:overlay=>"cloudinary_icon", :gravity=>"north_east", :effect=>"brightness:200", :opacity=>70, :x=>10, :y=>10, :width=>160},
  {:width=>350, :height=>150, :background=>"#0e4167", :crop=>"pad"}
  ])

PHP v1:

cl_video_tag("funny_dog", array("transformation"=>array(
  array("video_codec"=>"auto"),
  array("overlay"=>"cloudinary_icon", "gravity"=>"north_east", "effect"=>"brightness:200", "opacity"=>70, "x"=>10, "y"=>10, "width"=>160),
  array("width"=>350, "height"=>150, "background"=>"#0e4167", "crop"=>"pad")
  )))

PHP v2:

(new VideoTag('funny_dog.webm'))
  ->transcode(Transcode::videoCodec(VideoCodec::auto()))
  ->overlay(
      Overlay::source(Source::image('cloudinary_icon')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(160))
          ->adjust(Adjust::opacity(70))
          ->adjust(Adjust::brightness()->level(200))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::northEast()))
        ->offsetX(10)->offsetY(10)))
    ->resize(Resize::pad()->width(350)->height(150)
      ->background(Background::color(Color::rgb('0e4167')))
  );

Python:

CloudinaryVideo("funny_dog").video(transformation=[
  {'video_codec': "auto"},
  {'overlay': "cloudinary_icon", 'gravity': "north_east", 'effect': "brightness:200", 'opacity': 70, 'x': 10, 'y': 10, 'width': 160},
  {'width': 350, 'height': 150, 'background': "#0e4167", 'crop': "pad"}
  ])

Node.js:

cloudinary.video("funny_dog", {transformation: [
  {video_codec: "auto"},
  {overlay: "cloudinary_icon", gravity: "north_east", effect: "brightness:200", opacity: 70, x: 10, y: 10, width: 160},
  {width: 350, height: 150, background: "#0e4167", crop: "pad"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .videoCodec("auto").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).gravity("north_east").effect("brightness:200").opacity(70).x(10).y(10).width(160).chain()
  .width(350).height(150).background("#0e4167").crop("pad")).videoTag("funny_dog");

JS:

cloudinary.videoTag('funny_dog', {transformation: [
  {videoCodec: "auto"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), gravity: "north_east", effect: "brightness:200", opacity: 70, x: 10, y: 10, width: 160},
  {width: 350, height: 150, background: "#0e4167", crop: "pad"}
  ]}).toHtml();

jQuery:

$.cloudinary.video("funny_dog", {transformation: [
  {video_codec: "auto"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), gravity: "north_east", effect: "brightness:200", opacity: 70, x: 10, y: 10, width: 160},
  {width: 350, height: 150, background: "#0e4167", crop: "pad"}
  ]})

React:

<Video publicId="funny_dog" >
  <Transformation videoCodec="auto" />
  <Transformation overlay="cloudinary_icon" gravity="north_east" effect="brightness:200" opacity="70" x="10" y="10" width="160" />
  <Transformation width="350" height="150" background="#0e4167" crop="pad" />
</Video>

Vue.js:

<cld-video publicId="funny_dog" >
  <cld-transformation videoCodec="auto" />
  <cld-transformation :overlay="cloudinary_icon" gravity="north_east" effect="brightness:200" opacity="70" x="10" y="10" width="160" />
  <cld-transformation width="350" height="150" background="#0e4167" crop="pad" />
</cld-video>

Angular:

<cl-video public-id="funny_dog" >
  <cl-transformation video-codec="auto">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" gravity="north_east" effect="brightness:200" opacity="70" x="10" y="10" width="160">
  </cl-transformation>
  <cl-transformation width="350" height="150" background="#0e4167" crop="pad">
  </cl-transformation>
</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .VideoCodec("auto").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Gravity("north_east").Effect("brightness:200").Opacity(70).X(10).Y(10).Width(160).Chain()
  .Width(350).Height(150).Background("#0e4167").Crop("pad")).BuildVideoTag("funny_dog")

Android:

MediaManager.get().url().transformation(new Transformation()
  .videoCodec("auto").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).gravity("north_east").effect("brightness:200").opacity(70).x(10).y(10).width(160).chain()
  .width(350).height(150).background("#0e4167").crop("pad")).resourceType("video").generate("funny_dog.webm");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setVideoCodec("auto").chain()
  .setOverlay("cloudinary_icon").setGravity("north_east").setEffect("brightness:200").setOpacity(70).setX(10).setY(10).setWidth(160).chain()
  .setWidth(350).setHeight(150).setBackground("#0e4167").setCrop("pad")).generate("funny_dog.webm")

There are plenty of additional video and image manipulation options that you can choose from, we have only shown a few here to give a small taste of how easy it is to manipulate your videos. See our video documentation for more details and examples.

Creating an image thumbnail from a video

You can also easily create image thumbnails of any frame in a video and then apply any of Cloudinary's image transformations to the result. For example, to create an image thumbnail of the frame at 1 second in the funny_dog video in JPG format, scaled to a width of 250 pixels and a height of 150 pixels:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/w_250,h_150,c_scale,so_1/funny_dog.jpg

Ruby:

cl_image_tag("funny_dog.jpg", :width=>250, :height=>150, :start_offset=>"1", :crop=>"scale", :resource_type=>"video")

PHP v1:

cl_image_tag("funny_dog.jpg", array("width"=>250, "height"=>150, "start_offset"=>"1", "crop"=>"scale", "resource_type"=>"video"))

PHP v2:

(new ImageTag('funny_dog.jpg'))
  ->videoEdit(VideoEdit::trim()->startOffset(1))
  ->resize(Resize::scale()->width(250)->height(150))
  ->assetType(AssetType::VIDEO);

Python:

CloudinaryVideo("funny_dog.jpg").image(width=250, height=150, start_offset="1", crop="scale")

Node.js:

cloudinary.image("funny_dog.jpg", {width: 250, height: 150, start_offset: "1", crop: "scale", resource_type: "video"})

Java:

cloudinary.url().transformation(new Transformation().width(250).height(150).startOffset("1").crop("scale")).resourceType("video").imageTag("funny_dog.jpg");

JS:

cloudinary.videoTag('funny_dog.jpg', {width: 250, height: 150, startOffset: "1", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("funny_dog.jpg", {width: 250, height: 150, start_offset: "1", crop: "scale", resource_type: "video"})

React:

<Video publicId="funny_dog.jpg" resourceType="video">
  <Transformation width="250" height="150" startOffset="1" crop="scale" />
</Video>

Vue.js:

<cld-video publicId="funny_dog.jpg" resourceType="video">
  <cld-transformation width="250" height="150" startOffset="1" crop="scale" />
</cld-video>

Angular:

<cl-video public-id="funny_dog.jpg" resource-type="video">
  <cl-transformation width="250" height="150" start-offset="1" crop="scale">
  </cl-transformation>
</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(250).Height(150).StartOffset("1").Crop("scale")).BuildImageTag("funny_dog.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(250).height(150).startOffset("1").crop("scale")).resourceType("video").generate("funny_dog.jpg");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(250).setHeight(150).setStartOffset("1").setCrop("scale")).generate("funny_dog.jpg")

jpg created from funny_dog.mp4 scaled to 250x150

To create a circular 300x300 sharpened image thumbnail in JPG format of the frame at the 15% mark of the funny_dog video, and then adding the cloudinary_icon image overlay with a north gravity and resizing to a width of 50% of the total image with 40% opacity:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/w_300,h_300,c_fill,r_max,e_sharpen,so_15p/l_cloudinary_icon,w_0.5,fl_relative,o_40,g_north/funny_dog.jpg

Ruby:

cl_image_tag("funny_dog.jpg", :resource_type=>"video", :transformation=>[
  {:width=>300, :height=>300, :radius=>"max", :effect=>"sharpen", :start_offset=>"15p", :crop=>"fill"},
  {:overlay=>"cloudinary_icon", :width=>0.5, :flags=>"relative", :opacity=>40, :gravity=>"north"}
  ])

PHP v1:

cl_image_tag("funny_dog.jpg", array("resource_type"=>"video", "transformation"=>array(
  array("width"=>300, "height"=>300, "radius"=>"max", "effect"=>"sharpen", "start_offset"=>"15p", "crop"=>"fill"),
  array("overlay"=>"cloudinary_icon", "width"=>"0.5", "flags"=>"relative", "opacity"=>40, "gravity"=>"north")
  )))

PHP v2:

(new ImageTag('funny_dog.jpg'))
  ->videoEdit(VideoEdit::trim()->startOffset('15%'))
  ->resize(Resize::fill()->width(300)->height(300))
  ->roundCorners(RoundCorners::max())
  ->adjust(Adjust::sharpen())
  ->overlay(
      Overlay::source(Source::image('cloudinary_icon')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(0.5)->relative())
          ->adjust(Adjust::opacity(40))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::north()))))
    ->assetType(AssetType::VIDEO);

Python:

CloudinaryVideo("funny_dog.jpg").image(transformation=[
  {'width': 300, 'height': 300, 'radius': "max", 'effect': "sharpen", 'start_offset': "15p", 'crop': "fill"},
  {'overlay': "cloudinary_icon", 'width': "0.5", 'flags': "relative", 'opacity': 40, 'gravity': "north"}
  ])

Node.js:

cloudinary.image("funny_dog.jpg", {resource_type: "video", transformation: [
  {width: 300, height: 300, radius: "max", effect: "sharpen", start_offset: "15p", crop: "fill"},
  {overlay: "cloudinary_icon", width: "0.5", flags: "relative", opacity: 40, gravity: "north"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(300).height(300).radius("max").effect("sharpen").startOffset("15p").crop("fill").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).width(0.5).flags("relative").opacity(40).gravity("north")).resourceType("video").imageTag("funny_dog.jpg");

JS:

cloudinary.videoTag('funny_dog.jpg', {transformation: [
  {width: 300, height: 300, radius: "max", effect: "sharpen", startOffset: "15p", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: "0.5", flags: "relative", opacity: 40, gravity: "north"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("funny_dog.jpg", {resource_type: "video", transformation: [
  {width: 300, height: 300, radius: "max", effect: "sharpen", start_offset: "15p", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: "0.5", flags: "relative", opacity: 40, gravity: "north"}
  ]})

React:

<Video publicId="funny_dog.jpg" resourceType="video">
  <Transformation width="300" height="300" radius="max" effect="sharpen" startOffset="15p" crop="fill" />
  <Transformation overlay="cloudinary_icon" width="0.5" flags="relative" opacity="40" gravity="north" />
</Video>

Vue.js:

<cld-video publicId="funny_dog.jpg" resourceType="video">
  <cld-transformation width="300" height="300" radius="max" effect="sharpen" startOffset="15p" crop="fill" />
  <cld-transformation :overlay="cloudinary_icon" width="0.5" flags="relative" opacity="40" gravity="north" />
</cld-video>

Angular:

<cl-video public-id="funny_dog.jpg" resource-type="video">
  <cl-transformation width="300" height="300" radius="max" effect="sharpen" start-offset="15p" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" width="0.5" flags="relative" opacity="40" gravity="north">
  </cl-transformation>
</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Height(300).Radius("max").Effect("sharpen").StartOffset("15p").Crop("fill").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Width(0.5).Flags("relative").Opacity(40).Gravity("north")).BuildImageTag("funny_dog.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(300).height(300).radius("max").effect("sharpen").startOffset("15p").crop("fill").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).width(0.5).flags("relative").opacity(40).gravity("north")).resourceType("video").generate("funny_dog.jpg");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(300).setHeight(300).setRadius("max").setEffect("sharpen").setStartOffset("15p").setCrop("fill").chain()
  .setOverlay("cloudinary_icon").setWidth(0.5).setFlags("relative").setOpacity(40).setGravity("north")).generate("funny_dog.jpg")

Sharpened, rounded jpg created from the frame at 15% of funny_dog.mp4 filled to 300x300 with an overlay

Summary

Video uploading and delivery has become more and more popular and developers face a significant challenge handling these video files for embedding in their web and mobile apps while maintaining complex clusters to handle video uploading and transcoding. Cloudinary eliminates all the R&D work involved, and with a single line of code videos are uploaded to the cloud, and then with dynamic URLs, videos are automatically converted to all required video formats and manipulated to fit the graphic design of web applications and the various devices and resolutions.

The video manipulation features are available to all our free and paid plans. If you don't have a Cloudinary account, you are welcome to sign up to our free account and try it out.

Recent Blog Posts

Supercharge Shopify Conversions and Revenue with Cloudinary

By Aug 19, 2022

Our $2B Valuation

By Feb 17, 2022

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Compelling Visual Experiences Are Imperative for DTC E-Commerce

By Pradip Lal Feb 02, 2022

Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Automatically Translating Videos for International Outreach

By Jan 26, 2022

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Minted Delivers High-quality Art at Scale with Cloudinary

By Jan 25, 2022

Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

ImageCon 2021 by the Numbers: Fun Facts and Event Highlights

By Jan 24, 2022

Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.