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
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
To rotate an image or text overlay on a video, first overlay the image or text and rotate them.
URL:
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 v1:
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") )))
PHP v2:
(new VideoTag('dog.mp4')) ->transcode(Transcode::audioCodec(AudioCodec::none())) ->overlay( Overlay::source(Source::image('cloudinary_icon') ->transformation((new ImageTransformation()) ->resize(Resize::scale()->width(50)))) ->position((new Position()) ->gravity(Gravity::compass(Compass::southEast())))) ->overlay( Overlay::source(Source::image('cloudinary_icon') ->transformation((new ImageTransformation()) ->rotate(Rotate::mode(RotationMode::verticalFlip())) ->resize(Resize::scale()->width(50)))) ->position((new Position()) ->gravity(Gravity::compass(Compass::northWest())))) ->overlay( Overlay::source(Source::text('Cloudinary', (new TextStyle('arial', 20))) ->textColor(Color::WHITE) ->transformation((new ImageTransformation()) ->rotate(Rotate::byAngle(90)))) ->position((new Position()) ->gravity(Gravity::compass(Compass::southWest())))) ->overlay( Overlay::source(Source::text('Cloudinary', (new TextStyle('arial', 20))) ->textColor(Color::WHITE) ->transformation((new ImageTransformation()) ->rotate(Rotate::byAngle(-90)))) ->position((new Position()) ->gravity(Gravity::compass(Compass::northEast())))) ->resize(Resize::scale()->width(500));
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>
Vue.js:
<cld-video publicId="dog" > <cld-transformation audioCodec="none" /> <cld-transformation :overlay="cloudinary_icon" gravity="south_east" width="50" /> <cld-transformation angle="vflip" :overlay="cloudinary_icon" gravity="north_west" width="50" /> <cld-transformation angle="90" color="white" gravity="south_west" :overlay="{fontFamily: 'arial', fontSize: 20, text: 'Cloudinary'}" /> <cld-transformation angle="-90" color="white" gravity="north_east" :overlay="{fontFamily: 'arial', fontSize: 20, text: 'Cloudinary'}" /> <cld-transformation width="500" crop="scale" /> </cld-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
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.
URL:
Ruby:
PHP v1:
PHP v2:
(new VideoTag('h2-video.mp4')) ->resize(Resize::crop()->width(1080)->aspectRatio(AspectRatio::ar1X1())) ->videoEdit( VideoEdit::concatenate(Concatenate::videoSource('v2-video') ->transformation((new VideoTransformation()) ->resize(Resize::crop()->width(1080)->aspectRatio(AspectRatio::ar1X1()))))) ->resize(Resize::scale()->width(500));
Python:
Node.js:
Java:
JS:
jQuery:
React:
Vue.js:
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:
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")