Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

Automatically Flip Videos

Rotating and flipping videos on Cloudinary is a cakewalk. To rotate a video to an angle you desire, set the angle parameter. To mirror a video and vertically or horizontally flip it, set vflip or hflip as the angle value. Examples:

Vertical Mirror Flip

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/video/upload/a_vflip/w_500/dog.mp4
Ruby:
cl_video_tag("dog", :transformation=>[
  {:angle=>"vflip"},
  {:width=>500, :crop=>"scale"}
  ])
PHP:
cl_video_tag("dog", array("transformation"=>array(
  array("angle"=>"vflip"),
  array("width"=>500, "crop"=>"scale")
  )))
Python:
CloudinaryVideo("dog").video(transformation=[
  {'angle': "vflip"},
  {'width': 500, 'crop': "scale"}
  ])
Node.js:
cloudinary.video("dog", {transformation: [
  {angle: "vflip"},
  {width: 500, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .angle("vflip").chain()
  .width(500).crop("scale")).videoTag("dog");
JS:
cloudinary.videoTag('dog', {transformation: [
  {angle: "vflip"},
  {width: 500, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("dog", {transformation: [
  {angle: "vflip"},
  {width: 500, crop: "scale"}
  ]})
React:
<Video publicId="dog" >
  <Transformation angle="vflip" />
  <Transformation width="500" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation angle="vflip">
  </cl-transformation>
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Angle("vflip").Chain()
  .Width(500).Crop("scale")).BuildVideoTag("dog")
Android:
MediaManager.get().url().transformation(new Transformation()
  .angle("vflip").chain()
  .width(500).crop("scale")).resourceType("video").generate("dog.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAngle("vflip").chain()
  .setWidth(500).setCrop("scale")).generate("dog.mp4")

A positive integer value rotates a video clockwise; a negative integer value, counterclockwise. If the angle is not a multiple of 90, Cloudinary adds a rectangular bounding box to house the rotated video.

Forty-Five-Degree Clockwise Rotation

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/video/upload/a_45/w_500/dog.mp4
Ruby:
cl_video_tag("dog", :transformation=>[
  {:angle=>45},
  {:width=>500, :crop=>"scale"}
  ])
PHP:
cl_video_tag("dog", array("transformation"=>array(
  array("angle"=>45),
  array("width"=>500, "crop"=>"scale")
  )))
Python:
CloudinaryVideo("dog").video(transformation=[
  {'angle': 45},
  {'width': 500, 'crop': "scale"}
  ])
Node.js:
cloudinary.video("dog", {transformation: [
  {angle: 45},
  {width: 500, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .angle(45).chain()
  .width(500).crop("scale")).videoTag("dog");
JS:
cloudinary.videoTag('dog', {transformation: [
  {angle: 45},
  {width: 500, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("dog", {transformation: [
  {angle: 45},
  {width: 500, crop: "scale"}
  ]})
React:
<Video publicId="dog" >
  <Transformation angle="45" />
  <Transformation width="500" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation angle="45">
  </cl-transformation>
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Angle(45).Chain()
  .Width(500).Crop("scale")).BuildVideoTag("dog")
Android:
MediaManager.get().url().transformation(new Transformation()
  .angle(45).chain()
  .width(500).crop("scale")).resourceType("video").generate("dog.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAngle(45).chain()
  .setWidth(500).setCrop("scale")).generate("dog.mp4")

To rotate an image or text overlay on a video, first overlay the image or text and rotate them.

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/video/upload/ac_none/l_cloudinary_icon,g_south_east,w_50/a_vflip,l_cloudinary_icon,g_north_west,w_50/a_90,co_white,g_south_west,l_text:arial_20:Cloudinary/a_-90,co_white,g_north_east,l_text:arial_20:Cloudinary/w_500/dog.mp4
Ruby:
cl_video_tag("dog", :transformation=>[
  {:audio_codec=>"none"},
  {:overlay=>"cloudinary_icon", :gravity=>"south_east", :width=>50},
  {:angle=>"vflip", :overlay=>"cloudinary_icon", :gravity=>"north_west", :width=>50},
  {:angle=>90, :color=>"white", :gravity=>"south_west", :overlay=>{:font_family=>"arial", :font_size=>20, :text=>"Cloudinary"}},
  {:angle=>-90, :color=>"white", :gravity=>"north_east", :overlay=>{:font_family=>"arial", :font_size=>20, :text=>"Cloudinary"}},
  {:width=>500, :crop=>"scale"}
  ])
PHP:
cl_video_tag("dog", array("transformation"=>array(
  array("audio_codec"=>"none"),
  array("overlay"=>"cloudinary_icon", "gravity"=>"south_east", "width"=>50),
  array("angle"=>"vflip", "overlay"=>"cloudinary_icon", "gravity"=>"north_west", "width"=>50),
  array("angle"=>90, "color"=>"white", "gravity"=>"south_west", "overlay"=>array("font_family"=>"arial", "font_size"=>20, "text"=>"Cloudinary")),
  array("angle"=>-90, "color"=>"white", "gravity"=>"north_east", "overlay"=>array("font_family"=>"arial", "font_size"=>20, "text"=>"Cloudinary")),
  array("width"=>500, "crop"=>"scale")
  )))
Python:
CloudinaryVideo("dog").video(transformation=[
  {'audio_codec': "none"},
  {'overlay': "cloudinary_icon", 'gravity': "south_east", 'width': 50},
  {'angle': "vflip", 'overlay': "cloudinary_icon", 'gravity': "north_west", 'width': 50},
  {'angle': 90, 'color': "white", 'gravity': "south_west", 'overlay': {'font_family': "arial", 'font_size': 20, 'text': "Cloudinary"}},
  {'angle': -90, 'color': "white", 'gravity': "north_east", 'overlay': {'font_family': "arial", 'font_size': 20, 'text': "Cloudinary"}},
  {'width': 500, 'crop': "scale"}
  ])
Node.js:
cloudinary.video("dog", {transformation: [
  {audio_codec: "none"},
  {overlay: "cloudinary_icon", gravity: "south_east", width: 50},
  {angle: "vflip", overlay: "cloudinary_icon", gravity: "north_west", width: 50},
  {angle: 90, color: "white", gravity: "south_west", overlay: {font_family: "arial", font_size: 20, text: "Cloudinary"}},
  {angle: -90, color: "white", gravity: "north_east", overlay: {font_family: "arial", font_size: 20, text: "Cloudinary"}},
  {width: 500, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .audioCodec("none").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).gravity("south_east").width(50).chain()
  .angle("vflip").overlay(new Layer().publicId("cloudinary_icon")).gravity("north_west").width(50).chain()
  .angle(90).color("white").gravity("south_west").overlay(new TextLayer().fontFamily("arial").fontSize(20).text("Cloudinary")).chain()
  .angle(-90).color("white").gravity("north_east").overlay(new TextLayer().fontFamily("arial").fontSize(20).text("Cloudinary")).chain()
  .width(500).crop("scale")).videoTag("dog");
JS:
cloudinary.videoTag('dog', {transformation: [
  {audioCodec: "none"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), gravity: "south_east", width: 50},
  {angle: "vflip", overlay: new cloudinary.Layer().publicId("cloudinary_icon"), gravity: "north_west", width: 50},
  {angle: 90, color: "white", gravity: "south_west", overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(20).text("Cloudinary")},
  {angle: -90, color: "white", gravity: "north_east", overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(20).text("Cloudinary")},
  {width: 500, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("dog", {transformation: [
  {audio_codec: "none"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), gravity: "south_east", width: 50},
  {angle: "vflip", overlay: new cloudinary.Layer().publicId("cloudinary_icon"), gravity: "north_west", width: 50},
  {angle: 90, color: "white", gravity: "south_west", overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(20).text("Cloudinary")},
  {angle: -90, color: "white", gravity: "north_east", overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(20).text("Cloudinary")},
  {width: 500, crop: "scale"}
  ]})
React:
<Video publicId="dog" >
  <Transformation audioCodec="none" />
  <Transformation overlay="cloudinary_icon" gravity="south_east" width="50" />
  <Transformation angle="vflip" overlay="cloudinary_icon" gravity="north_west" width="50" />
  <Transformation angle="90" color="white" gravity="south_west" overlay={{fontFamily: "arial", fontSize: 20, text: "Cloudinary"}} />
  <Transformation angle="-90" color="white" gravity="north_east" overlay={{fontFamily: "arial", fontSize: 20, text: "Cloudinary"}} />
  <Transformation width="500" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation audio-codec="none">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" gravity="south_east" width="50">
  </cl-transformation>
  <cl-transformation angle="vflip" overlay="cloudinary_icon" gravity="north_west" width="50">
  </cl-transformation>
  <cl-transformation angle="90" color="white" gravity="south_west" overlay="text:arial_20:Cloudinary">
  </cl-transformation>
  <cl-transformation angle="-90" color="white" gravity="north_east" overlay="text:arial_20:Cloudinary">
  </cl-transformation>
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .AudioCodec("none").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Gravity("south_east").Width(50).Chain()
  .Angle("vflip").Overlay(new Layer().PublicId("cloudinary_icon")).Gravity("north_west").Width(50).Chain()
  .Angle(90).Color("white").Gravity("south_west").Overlay(new TextLayer().FontFamily("arial").FontSize(20).Text("Cloudinary")).Chain()
  .Angle(-90).Color("white").Gravity("north_east").Overlay(new TextLayer().FontFamily("arial").FontSize(20).Text("Cloudinary")).Chain()
  .Width(500).Crop("scale")).BuildVideoTag("dog")
Android:
MediaManager.get().url().transformation(new Transformation()
  .audioCodec("none").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).gravity("south_east").width(50).chain()
  .angle("vflip").overlay(new Layer().publicId("cloudinary_icon")).gravity("north_west").width(50).chain()
  .angle(90).color("white").gravity("south_west").overlay(new TextLayer().fontFamily("arial").fontSize(20).text("Cloudinary")).chain()
  .angle(-90).color("white").gravity("north_east").overlay(new TextLayer().fontFamily("arial").fontSize(20).text("Cloudinary")).chain()
  .width(500).crop("scale")).resourceType("video").generate("dog.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAudioCodec("none").chain()
  .setOverlay("cloudinary_icon").setGravity("south_east").setWidth(50).chain()
  .setAngle("vflip").setOverlay("cloudinary_icon").setGravity("north_west").setWidth(50).chain()
  .setAngle(90).setColor("white").setGravity("south_west").setOverlay("text:arial_20:Cloudinary").chain()
  .setAngle(-90).setColor("white").setGravity("north_east").setOverlay("text:arial_20:Cloudinary").chain()
  .setWidth(500).setCrop("scale")).generate("dog.mp4")

Want to convert a vertical video to a horizontal one or vice versa? You can do that by padding it and adding a blurred background. For example, for a resolution of 1280x720, see below.

Blurred Padding of Vertical Videos for a Horizontal Conversion

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/video/upload/b_blurred:1000,c_pad,h_720,w_1280/w_500/h-video.mp4
Ruby:
cl_video_tag("h-video", :transformation=>[
  {:background=>"blurred:1000", :height=>720, :width=>1280, :crop=>"pad"},
  {:width=>500, :crop=>"scale"}
  ])
PHP:
cl_video_tag("h-video", array("transformation"=>array(
  array("background"=>"blurred:1000", "height"=>720, "width"=>1280, "crop"=>"pad"),
  array("width"=>500, "crop"=>"scale")
  )))
Python:
CloudinaryVideo("h-video").video(transformation=[
  {'background': "blurred:1000", 'height': 720, 'width': 1280, 'crop': "pad"},
  {'width': 500, 'crop': "scale"}
  ])
Node.js:
cloudinary.video("h-video", {transformation: [
  {background: "blurred:1000", height: 720, width: 1280, crop: "pad"},
  {width: 500, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .background("blurred:1000").height(720).width(1280).crop("pad").chain()
  .width(500).crop("scale")).videoTag("h-video");
JS:
cloudinary.videoTag('h-video', {transformation: [
  {background: "blurred:1000", height: 720, width: 1280, crop: "pad"},
  {width: 500, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("h-video", {transformation: [
  {background: "blurred:1000", height: 720, width: 1280, crop: "pad"},
  {width: 500, crop: "scale"}
  ]})
React:
<Video publicId="h-video" >
  <Transformation background="blurred:1000" height="720" width="1280" crop="pad" />
  <Transformation width="500" crop="scale" />
</Video>
Angular:
<cl-video public-id="h-video" >
  <cl-transformation background="blurred:1000" height="720" width="1280" crop="pad">
  </cl-transformation>
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Background("blurred:1000").Height(720).Width(1280).Crop("pad").Chain()
  .Width(500).Crop("scale")).BuildVideoTag("h-video")
Android:
MediaManager.get().url().transformation(new Transformation()
  .background("blurred:1000").height(720).width(1280).crop("pad").chain()
  .width(500).crop("scale")).resourceType("video").generate("h-video.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setBackground("blurred:1000").setHeight(720).setWidth(1280).setCrop("pad").chain()
  .setWidth(500).setCrop("scale")).generate("h-video.mp4")

Say you have a couple of videos on the same event, one horizontal and the other vertical, and you want to merge them.One way of doing that is to crop both videos to a 1:1 aspect ratio so that they share the same dimensions, and then concatenate the videos.

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/video/upload/ar_1:1,c_crop,w_1080/ar_1:1,c_crop,l_video:v2-video,fl_splice,w_1080/w_500/h2-video.mp4
Ruby:
cl_video_tag("h2-video", :transformation=>[
  {:aspect_ratio=>"1:1", :width=>1080, :crop=>"crop"},
  {:aspect_ratio=>"1:1", :overlay=>"video:v2-video", :flags=>"splice", :width=>1080, :crop=>"crop"},
  {:width=>500, :crop=>"scale"}
  ])
PHP:
cl_video_tag("h2-video", array("transformation"=>array(
  array("aspect_ratio"=>"1:1", "width"=>1080, "crop"=>"crop"),
  array("aspect_ratio"=>"1:1", "overlay"=>"video:v2-video", "flags"=>"splice", "width"=>1080, "crop"=>"crop"),
  array("width"=>500, "crop"=>"scale")
  )))
Python:
CloudinaryVideo("h2-video").video(transformation=[
  {'aspect_ratio': "1:1", 'width': 1080, 'crop': "crop"},
  {'aspect_ratio': "1:1", 'overlay': "video:v2-video", 'flags': "splice", 'width': 1080, 'crop': "crop"},
  {'width': 500, 'crop': "scale"}
  ])
Node.js:
cloudinary.video("h2-video", {transformation: [
  {aspect_ratio: "1:1", width: 1080, crop: "crop"},
  {aspect_ratio: "1:1", overlay: "video:v2-video", flags: "splice", width: 1080, crop: "crop"},
  {width: 500, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .aspectRatio("1:1").width(1080).crop("crop").chain()
  .aspectRatio("1:1").overlay(new Layer().publicId("video:v2-video")).flags("splice").width(1080).crop("crop").chain()
  .width(500).crop("scale")).videoTag("h2-video");
JS:
cloudinary.videoTag('h2-video', {transformation: [
  {aspectRatio: "1:1", width: 1080, crop: "crop"},
  {aspectRatio: "1:1", overlay: new cloudinary.Layer().publicId("video:v2-video"), flags: "splice", width: 1080, crop: "crop"},
  {width: 500, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("h2-video", {transformation: [
  {aspect_ratio: "1:1", width: 1080, crop: "crop"},
  {aspect_ratio: "1:1", overlay: new cloudinary.Layer().publicId("video:v2-video"), flags: "splice", width: 1080, crop: "crop"},
  {width: 500, crop: "scale"}
  ]})
React:
<Video publicId="h2-video" >
  <Transformation aspectRatio="1:1" width="1080" crop="crop" />
  <Transformation aspectRatio="1:1" overlay="video:v2-video" flags="splice" width="1080" crop="crop" />
  <Transformation width="500" crop="scale" />
</Video>
Angular:
<cl-video public-id="h2-video" >
  <cl-transformation aspect-ratio="1:1" width="1080" crop="crop">
  </cl-transformation>
  <cl-transformation aspect-ratio="1:1" overlay="video:v2-video" flags="splice" width="1080" crop="crop">
  </cl-transformation>
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .AspectRatio("1:1").Width(1080).Crop("crop").Chain()
  .AspectRatio("1:1").Overlay(new Layer().PublicId("video:v2-video")).Flags("splice").Width(1080).Crop("crop").Chain()
  .Width(500).Crop("scale")).BuildVideoTag("h2-video")
Android:
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1:1").width(1080).crop("crop").chain()
  .aspectRatio("1:1").overlay(new Layer().publicId("video:v2-video")).flags("splice").width(1080).crop("crop").chain()
  .width(500).crop("scale")).resourceType("video").generate("h2-video.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAspectRatio("1:1").setWidth(1080).setCrop("crop").chain()
  .setAspectRatio("1:1").setOverlay("video:v2-video").setFlags("splice").setWidth(1080).setCrop("crop").chain()
  .setWidth(500).setCrop("scale")).generate("h2-video.mp4")

by Hadar Bejerano
Tags: