> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # Text layer options [embedding_in_SDKs]: video_manipulation_and_delivery#embedding_videos_in_web_pages_using_sdks [predefined_text_templates]: video_text_layer_fonts#predefined_text_templates This page covers text layer options for videos. For the layer syntax itself, see [Layer syntax](video_layers). For layer transformations, see [Transforming layers](video_layer_transformations). Text layers can be customized in a variety of ways, such as applying CSS-like styles, adding line breaks, applying special characters, custom fonts, and more. ## Styling parameters In addition to the **required** font family and font size values of the text layer, a variety of optional CSS-like styles are supported, such as decoration, alignment, letter spacing, line spacing and more. For a full list, see the [Styling parameters](transformation_reference#styling_parameters) table in the _Transformation Reference_. The Cloudinary SDK [helper methods][embedding_in_SDKs] support supplying the values as an array of mapped values or as a serialized string of values. For example, in Ruby (other frameworks use similar syntax): ``` overlay: { text: 'Hello World', font_family: 'Arial', font_size: 18, font_weight: 'bold', font_style: 'italic', letter_spacing: 4 } ``` For example, to overlay the text string "Style" in Verdana bold with a size of 75 pixels, underlined, and with 14 pixels spacing between the letters: `l_text:Verdana_50_bold_underline_letter_spacing_14:Style`: ![Adding text to image](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/l_text:Verdana_75_bold_underline_letter_spacing_14:Style/fl_layer_apply/alfa_car.jpg) ```nodejs cloudinary.image("alfa_car.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Verdana", font_size: 75, font_weight: "bold", text_decoration: "underline", letter_spacing: 14, text: "Style"}}, {flags: "layer_apply"} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text( "Style", new TextStyle("Verdana", 75) .fontWeight("bold") .textDecoration("underline") .letterSpacing(14) ) ) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text( "Style", new TextStyle("Verdana", 75) .fontWeight("bold") .textDecoration("underline") .letterSpacing(14) ) ) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text( "Style", new TextStyle("Verdana", 75) .fontWeight("bold") .textDecoration("underline") .letterSpacing(14) ) ) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text( "Style", new TextStyle("Verdana", 75) .fontWeight("bold") .textDecoration("underline") .letterSpacing(14) ) ) ); ``` ```python CloudinaryImage("alfa_car.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': {'font_family': "Verdana", 'font_size': 75, 'font_weight': "bold", 'text_decoration': "underline", 'letter_spacing': 14, 'text': "Style"}}, {'flags': "layer_apply"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\TextDecoration; (new ImageTag('alfa_car.jpg')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Style",(new TextStyle("Verdana",75)) ->fontWeight( FontWeight::bold()) ->textDecoration( TextDecoration::underline()) ->letterSpacing(14)))); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Style")).chain() .flags("layer_apply")).imageTag("alfa_car.jpg"); ``` ```ruby cl_image_tag("alfa_car.jpg", transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Verdana", font_size: 75, font_weight: "bold", text_decoration: "underline", letter_spacing: 14, text: "Style"}}, {flags: "layer_apply"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Verdana").FontSize(75).FontWeight("bold").TextDecoration("underline").LetterSpacing(14).Text("Style")).Chain() .Flags("layer_apply")).BuildImageTag("alfa_car.jpg") ``` ```dart cloudinary.image('alfa_car.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/l_text:Verdana_75_bold_underline_letter_spacing_14:Style/fl_layer_apply")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("text:Verdana_75_bold_underline_letter_spacing_14:Style").chain() .setFlags("layer_apply")).generate("alfa_car.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Style")).chain() .flags("layer_apply")).generate("alfa_car.jpg"); ``` ```flutter cloudinary.image('alfa_car.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/l_text:Verdana_75_bold_underline_letter_spacing_14:Style/fl_layer_apply")); ``` ```kotlin cloudinary.image { publicId("alfa_car.jpg") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Style",TextStyle("Verdana",75) { fontWeight( FontWeight.bold()) textDecoration( TextDecoration.underline()) letterSpacing(14) }))) }.generate() ``` ```jquery $.cloudinary.image("alfa_car.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Style")}, {flags: "layer_apply"} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text( "Style", new TextStyle("Verdana", 75) .fontWeight("bold") .textDecoration("underline") .letterSpacing(14) ) ) ); ``` ![Adding text to video](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/l_text:Verdana_50_bold_underline_letter_spacing_14:Style/fl_layer_apply/blue_sports_car.mp4) ```nodejs cloudinary.video("blue_sports_car", {transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Verdana", font_size: 50, font_weight: "bold", text_decoration: "underline", letter_spacing: 14, text: "Style"}}, {flags: "layer_apply"} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text( "Style", new TextStyle("Verdana", 50) .fontWeight("bold") .textDecoration("underline") .letterSpacing(14) ) ) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text( "Style", new TextStyle("Verdana", 50) .fontWeight("bold") .textDecoration("underline") .letterSpacing(14) ) ) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text( "Style", new TextStyle("Verdana", 50) .fontWeight("bold") .textDecoration("underline") .letterSpacing(14) ) ) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text( "Style", new TextStyle("Verdana", 50) .fontWeight("bold") .textDecoration("underline") .letterSpacing(14) ) ) ); ``` ```python CloudinaryVideo("blue_sports_car").video(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': {'font_family': "Verdana", 'font_size': 50, 'font_weight': "bold", 'text_decoration': "underline", 'letter_spacing': 14, 'text': "Style"}}, {'flags': "layer_apply"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\TextDecoration; (new VideoTag('blue_sports_car.mp4')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Style",(new TextStyle("Verdana",50)) ->fontWeight( FontWeight::bold()) ->textDecoration( TextDecoration::underline()) ->letterSpacing(14)))); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Style")).chain() .flags("layer_apply")).videoTag("blue_sports_car"); ``` ```ruby cl_video_tag("blue_sports_car", transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Verdana", font_size: 50, font_weight: "bold", text_decoration: "underline", letter_spacing: 14, text: "Style"}}, {flags: "layer_apply"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Verdana").FontSize(50).FontWeight("bold").TextDecoration("underline").LetterSpacing(14).Text("Style")).Chain() .Flags("layer_apply")).BuildVideoTag("blue_sports_car") ``` ```dart cloudinary.video('blue_sports_car.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/l_text:Verdana_50_bold_underline_letter_spacing_14:Style/fl_layer_apply")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("text:Verdana_50_bold_underline_letter_spacing_14:Style").chain() .setFlags("layer_apply")).generate("blue_sports_car.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Style")).chain() .flags("layer_apply")).resourceType("video").generate("blue_sports_car.mp4"); ``` ```flutter cloudinary.video('blue_sports_car.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/l_text:Verdana_50_bold_underline_letter_spacing_14:Style/fl_layer_apply")); ``` ```kotlin cloudinary.video { publicId("blue_sports_car.mp4") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Style",TextStyle("Verdana",50) { fontWeight( FontWeight.bold()) textDecoration( TextDecoration.underline()) letterSpacing(14) }))) }.generate() ``` ```jquery $.cloudinary.video("blue_sports_car", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Style")}, {flags: "layer_apply"} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text( "Style", new TextStyle("Verdana", 50) .fontWeight("bold") .textDecoration("underline") .letterSpacing(14) ) ) ); ``` > **TIP**: You can save styling parameters as a text image for easy reuse. See [Predefined text templates][predefined_text_templates]. ## Text color You can control the color of the text overlay by adding the `color` property (`co` in URLs). Opaque colors can be set as an RGB hex triplet (e.g., `co_rgb:3e2222`), a 3-digit RGB hex (e.g., `co_rgb:777`) or a named color (e.g., `co_green`). By default, if the color property is omitted, the text has a black color. For example, adding the text string "Style" in Times bold with a size of 90 pixels at a distance of 20 pixels from the bottom of the base video, in yellow text (FFFF00): !['Style' added to image](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/co_rgb:FFFF00,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20/alfa_car.jpg) ```nodejs cloudinary.image("alfa_car.jpg", {transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF00", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Style"}}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF00" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF00" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF00" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF00" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```python CloudinaryImage("alfa_car.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'color': "#FFFF00", 'overlay': {'font_family': "Times", 'font_size': 90, 'font_weight': "bold", 'text': "Style"}}, {'flags': "layer_apply", 'gravity': "south", 'y': 20} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\Color; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('alfa_car.jpg')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Style",(new TextStyle("Times",90)) ->fontWeight( FontWeight::bold()) ) ->textColor(Color::rgb("FFFF00")) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::south())) ->offsetY(20)) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .color("#FFFF00").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")).chain() .flags("layer_apply").gravity("south").y(20)).imageTag("alfa_car.jpg"); ``` ```ruby cl_image_tag("alfa_car.jpg", transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF00", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Style"}}, {flags: "layer_apply", gravity: "south", y: 20} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Color("#FFFF00").Overlay(new TextLayer().FontFamily("Times").FontSize(90).FontWeight("bold").Text("Style")).Chain() .Flags("layer_apply").Gravity("south").Y(20)).BuildImageTag("alfa_car.jpg") ``` ```dart cloudinary.image('alfa_car.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/co_rgb:FFFF00,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setColor("#FFFF00").setOverlay("text:Times_90_bold:Style").chain() .setFlags("layer_apply").setGravity("south").setY(20)).generate("alfa_car.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .color("#FFFF00").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")).chain() .flags("layer_apply").gravity("south").y(20)).generate("alfa_car.jpg"); ``` ```flutter cloudinary.image('alfa_car.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/co_rgb:FFFF00,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20")); ``` ```kotlin cloudinary.image { publicId("alfa_car.jpg") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Style",TextStyle("Times",90) { fontWeight( FontWeight.bold()) }) { textColor(Color.rgb("FFFF00")) }) { position(Position() { gravity( Gravity.compass( Compass.south())) offsetY(20) }) }) }.generate() ``` ```jquery $.cloudinary.image("alfa_car.jpg", {transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF00", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF00" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` !['Style' added to video](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/co_rgb:FFFF00,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20/blue_sports_car.mp4) ```nodejs cloudinary.video("blue_sports_car", {transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF00", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Style"}}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF00" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF00" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF00" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF00" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```python CloudinaryVideo("blue_sports_car").video(transformation=[ {'width': 500, 'crop': "scale"}, {'color': "#FFFF00", 'overlay': {'font_family': "Times", 'font_size': 90, 'font_weight': "bold", 'text': "Style"}}, {'flags': "layer_apply", 'gravity': "south", 'y': 20} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\Color; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new VideoTag('blue_sports_car.mp4')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Style",(new TextStyle("Times",90)) ->fontWeight( FontWeight::bold()) ) ->textColor(Color::rgb("FFFF00")) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::south())) ->offsetY(20)) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .color("#FFFF00").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")).chain() .flags("layer_apply").gravity("south").y(20)).videoTag("blue_sports_car"); ``` ```ruby cl_video_tag("blue_sports_car", transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF00", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Style"}}, {flags: "layer_apply", gravity: "south", y: 20} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Color("#FFFF00").Overlay(new TextLayer().FontFamily("Times").FontSize(90).FontWeight("bold").Text("Style")).Chain() .Flags("layer_apply").Gravity("south").Y(20)).BuildVideoTag("blue_sports_car") ``` ```dart cloudinary.video('blue_sports_car.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/co_rgb:FFFF00,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setColor("#FFFF00").setOverlay("text:Times_90_bold:Style").chain() .setFlags("layer_apply").setGravity("south").setY(20)).generate("blue_sports_car.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .color("#FFFF00").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")).chain() .flags("layer_apply").gravity("south").y(20)).resourceType("video").generate("blue_sports_car.mp4"); ``` ```flutter cloudinary.video('blue_sports_car.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/co_rgb:FFFF00,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20")); ``` ```kotlin cloudinary.video { publicId("blue_sports_car.mp4") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Style",TextStyle("Times",90) { fontWeight( FontWeight.bold()) }) { textColor(Color.rgb("FFFF00")) }) { position(Position() { gravity( Gravity.compass( Compass.south())) offsetY(20) }) }) }.generate() ``` ```jquery $.cloudinary.video("blue_sports_car", {transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF00", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF00" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` You can also use a 4-digit or 8-digit RGBA hex quadruplet for the color, where the 4th hex value represents the alpha (opacity) value (e.g., `co_rgb:3e222240` results in 25% opacity). The example below uses the same text string "Style" in Times bold with a size of 90 pixels at a distance of 20 pixels from the bottom of the base video, in yellow text, but this time with an opacity of 50% (FFFF0080): ![Semi-transparent 'Style' added to image](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/co_rgb:FFFF0080,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20/alfa_car.jpg) ```nodejs cloudinary.image("alfa_car.jpg", {transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF0080", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Style"}}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF0080" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF0080" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF0080" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF0080" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```python CloudinaryImage("alfa_car.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'color': "#FFFF0080", 'overlay': {'font_family': "Times", 'font_size': 90, 'font_weight': "bold", 'text': "Style"}}, {'flags': "layer_apply", 'gravity': "south", 'y': 20} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\Color; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('alfa_car.jpg')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Style",(new TextStyle("Times",90)) ->fontWeight( FontWeight::bold()) ) ->textColor(Color::rgb("FFFF0080")) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::south())) ->offsetY(20)) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .color("#FFFF0080").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")).chain() .flags("layer_apply").gravity("south").y(20)).imageTag("alfa_car.jpg"); ``` ```ruby cl_image_tag("alfa_car.jpg", transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF0080", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Style"}}, {flags: "layer_apply", gravity: "south", y: 20} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Color("#FFFF0080").Overlay(new TextLayer().FontFamily("Times").FontSize(90).FontWeight("bold").Text("Style")).Chain() .Flags("layer_apply").Gravity("south").Y(20)).BuildImageTag("alfa_car.jpg") ``` ```dart cloudinary.image('alfa_car.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/co_rgb:FFFF0080,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setColor("#FFFF0080").setOverlay("text:Times_90_bold:Style").chain() .setFlags("layer_apply").setGravity("south").setY(20)).generate("alfa_car.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .color("#FFFF0080").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")).chain() .flags("layer_apply").gravity("south").y(20)).generate("alfa_car.jpg"); ``` ```flutter cloudinary.image('alfa_car.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/co_rgb:FFFF0080,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20")); ``` ```kotlin cloudinary.image { publicId("alfa_car.jpg") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Style",TextStyle("Times",90) { fontWeight( FontWeight.bold()) }) { textColor(Color.rgb("FFFF0080")) }) { position(Position() { gravity( Gravity.compass( Compass.south())) offsetY(20) }) }) }.generate() ``` ```jquery $.cloudinary.image("alfa_car.jpg", {transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF0080", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("alfa_car.jpg").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF0080" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ![Semi-transparent 'Style' added to video](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/co_rgb:FFFF0080,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20/blue_sports_car.mp4) ```nodejs cloudinary.video("blue_sports_car", {transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF0080", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Style"}}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF0080" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF0080" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF0080" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF0080" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```python CloudinaryVideo("blue_sports_car").video(transformation=[ {'width': 500, 'crop': "scale"}, {'color': "#FFFF0080", 'overlay': {'font_family': "Times", 'font_size': 90, 'font_weight': "bold", 'text': "Style"}}, {'flags': "layer_apply", 'gravity': "south", 'y': 20} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\Color; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new VideoTag('blue_sports_car.mp4')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Style",(new TextStyle("Times",90)) ->fontWeight( FontWeight::bold()) ) ->textColor(Color::rgb("FFFF0080")) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::south())) ->offsetY(20)) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .color("#FFFF0080").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")).chain() .flags("layer_apply").gravity("south").y(20)).videoTag("blue_sports_car"); ``` ```ruby cl_video_tag("blue_sports_car", transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF0080", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Style"}}, {flags: "layer_apply", gravity: "south", y: 20} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Color("#FFFF0080").Overlay(new TextLayer().FontFamily("Times").FontSize(90).FontWeight("bold").Text("Style")).Chain() .Flags("layer_apply").Gravity("south").Y(20)).BuildVideoTag("blue_sports_car") ``` ```dart cloudinary.video('blue_sports_car.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/co_rgb:FFFF0080,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setColor("#FFFF0080").setOverlay("text:Times_90_bold:Style").chain() .setFlags("layer_apply").setGravity("south").setY(20)).generate("blue_sports_car.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .color("#FFFF0080").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")).chain() .flags("layer_apply").gravity("south").y(20)).resourceType("video").generate("blue_sports_car.mp4"); ``` ```flutter cloudinary.video('blue_sports_car.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/co_rgb:FFFF0080,l_text:Times_90_bold:Style/fl_layer_apply,g_south,y_20")); ``` ```kotlin cloudinary.video { publicId("blue_sports_car.mp4") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Style",TextStyle("Times",90) { fontWeight( FontWeight.bold()) }) { textColor(Color.rgb("FFFF0080")) }) { position(Position() { gravity( Gravity.compass( Compass.south())) offsetY(20) }) }) }.generate() ``` ```jquery $.cloudinary.video("blue_sports_car", {transformation: [ {width: 500, crop: "scale"}, {color: "#FFFF0080", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Style")}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("blue_sports_car.mp4").resize(scale().width(500)).overlay( source( text("Style", new TextStyle("Times", 90).fontWeight("bold")).textColor( "#FFFF0080" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ## Multi-line text You can manually break lines of text by separating each line of text with the newline character (`%0A`). For example, adding the text string "Pretty Flowers" in Verdana bold with a size of 50 pixels at a distance of 10 pixels from the left border of the base video, where each word appears on a new line with line spacing of -15 pixels: !['Flowers' added to image with line-break](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/l_text:Verdana_50_bold_line_spacing_-15:Pretty%250AFlowers/fl_layer_apply,g_west,x_10/flowers.jpg) ```nodejs cloudinary.image("flowers.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Verdana", font_size: 50, font_weight: "bold", text: "Pretty%250AFlowers"}}, {flags: "layer_apply", gravity: "west", x: 10} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay( source( text( "Pretty%0AFlowers", new TextStyle("Verdana", 50) .fontWeight("bold") .lineSpacing(-15) ) ).position( new Position() .gravity(compass("west")) .offsetX(10) ) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay( source( text( "Pretty%0AFlowers", new TextStyle("Verdana", 50) .fontWeight("bold") .lineSpacing(-15) ) ).position( new Position() .gravity(compass("west")) .offsetX(10) ) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay( source( text( "Pretty%0AFlowers", new TextStyle("Verdana", 50) .fontWeight("bold") .lineSpacing(-15) ) ).position( new Position() .gravity(compass("west")) .offsetX(10) ) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay( source( text( "Pretty%0AFlowers", new TextStyle("Verdana", 50) .fontWeight("bold") .lineSpacing(-15) ) ).position( new Position() .gravity(compass("west")) .offsetX(10) ) ); ``` ```python CloudinaryImage("flowers.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': {'font_family': "Verdana", 'font_size': 50, 'font_weight': "bold", 'text': "Pretty%250AFlowers"}}, {'flags': "layer_apply", 'gravity': "west", 'x': 10} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('flowers.jpg')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Pretty%0AFlowers",(new TextStyle("Verdana",50)) ->fontWeight( FontWeight::bold()) ->lineSpacing(-15))) ->position((new Position()) ->gravity( Gravity::compass( Compass::west())) ->offsetX(10)) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Pretty%250AFlowers")).chain() .flags("layer_apply").gravity("west").x(10)).imageTag("flowers.jpg"); ``` ```ruby cl_image_tag("flowers.jpg", transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Verdana", font_size: 50, font_weight: "bold", text: "Pretty%250AFlowers"}}, {flags: "layer_apply", gravity: "west", x: 10} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Verdana").FontSize(50).FontWeight("bold").Text("Pretty%250AFlowers")).Chain() .Flags("layer_apply").Gravity("west").X(10)).BuildImageTag("flowers.jpg") ``` ```dart cloudinary.image('flowers.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/l_text:Verdana_50_bold_line_spacing_-15:Pretty%0AFlowers/fl_layer_apply,g_west,x_10")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("text:Verdana_50_bold_line_spacing_-15:Pretty%250AFlowers").chain() .setFlags("layer_apply").setGravity("west").setX(10)).generate("flowers.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Pretty%250AFlowers")).chain() .flags("layer_apply").gravity("west").x(10)).generate("flowers.jpg"); ``` ```flutter cloudinary.image('flowers.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/l_text:Verdana_50_bold_line_spacing_-15:Pretty%0AFlowers/fl_layer_apply,g_west,x_10")); ``` ```kotlin cloudinary.image { publicId("flowers.jpg") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Pretty%0AFlowers",TextStyle("Verdana",50) { fontWeight( FontWeight.bold()) lineSpacing(-15) })) { position(Position() { gravity( Gravity.compass( Compass.west())) offsetX(10) }) }) }.generate() ``` ```jquery $.cloudinary.image("flowers.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Pretty%250AFlowers")}, {flags: "layer_apply", gravity: "west", x: 10} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay( source( text( "Pretty%0AFlowers", new TextStyle("Verdana", 50) .fontWeight("bold") .lineSpacing(-15) ) ).position( new Position() .gravity(compass("west")) .offsetX(10) ) ); ``` !['Flowers' added to video with line-break](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/l_text:Verdana_50_bold_line_spacing_-15:Pretty%250AFlowers/fl_layer_apply,g_west,x_10/lotus_flower.mp4) ```nodejs cloudinary.video("lotus_flower", {transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Verdana", font_size: 50, font_weight: "bold", text: "Pretty%250AFlowers"}}, {flags: "layer_apply", gravity: "west", x: 10} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("lotus_flower.mp4").resize(scale().width(500)).overlay( source( text( "Pretty%0AFlowers", new TextStyle("Verdana", 50) .fontWeight("bold") .lineSpacing(-15) ) ).position( new Position() .gravity(compass("west")) .offsetX(10) ) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("lotus_flower.mp4").resize(scale().width(500)).overlay( source( text( "Pretty%0AFlowers", new TextStyle("Verdana", 50) .fontWeight("bold") .lineSpacing(-15) ) ).position( new Position() .gravity(compass("west")) .offsetX(10) ) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("lotus_flower.mp4").resize(scale().width(500)).overlay( source( text( "Pretty%0AFlowers", new TextStyle("Verdana", 50) .fontWeight("bold") .lineSpacing(-15) ) ).position( new Position() .gravity(compass("west")) .offsetX(10) ) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("lotus_flower.mp4").resize(scale().width(500)).overlay( source( text( "Pretty%0AFlowers", new TextStyle("Verdana", 50) .fontWeight("bold") .lineSpacing(-15) ) ).position( new Position() .gravity(compass("west")) .offsetX(10) ) ); ``` ```python CloudinaryVideo("lotus_flower").video(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': {'font_family': "Verdana", 'font_size': 50, 'font_weight': "bold", 'text': "Pretty%250AFlowers"}}, {'flags': "layer_apply", 'gravity': "west", 'x': 10} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new VideoTag('lotus_flower.mp4')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Pretty%0AFlowers",(new TextStyle("Verdana",50)) ->fontWeight( FontWeight::bold()) ->lineSpacing(-15))) ->position((new Position()) ->gravity( Gravity::compass( Compass::west())) ->offsetX(10)) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Pretty%250AFlowers")).chain() .flags("layer_apply").gravity("west").x(10)).videoTag("lotus_flower"); ``` ```ruby cl_video_tag("lotus_flower", transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Verdana", font_size: 50, font_weight: "bold", text: "Pretty%250AFlowers"}}, {flags: "layer_apply", gravity: "west", x: 10} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Verdana").FontSize(50).FontWeight("bold").Text("Pretty%250AFlowers")).Chain() .Flags("layer_apply").Gravity("west").X(10)).BuildVideoTag("lotus_flower") ``` ```dart cloudinary.video('lotus_flower.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/l_text:Verdana_50_bold_line_spacing_-15:Pretty%0AFlowers/fl_layer_apply,g_west,x_10")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("text:Verdana_50_bold_line_spacing_-15:Pretty%250AFlowers").chain() .setFlags("layer_apply").setGravity("west").setX(10)).generate("lotus_flower.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Pretty%250AFlowers")).chain() .flags("layer_apply").gravity("west").x(10)).resourceType("video").generate("lotus_flower.mp4"); ``` ```flutter cloudinary.video('lotus_flower.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/l_text:Verdana_50_bold_line_spacing_-15:Pretty%0AFlowers/fl_layer_apply,g_west,x_10")); ``` ```kotlin cloudinary.video { publicId("lotus_flower.mp4") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Pretty%0AFlowers",TextStyle("Verdana",50) { fontWeight( FontWeight.bold()) lineSpacing(-15) })) { position(Position() { gravity( Gravity.compass( Compass.west())) offsetX(10) }) }) }.generate() ``` ```jquery $.cloudinary.video("lotus_flower", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Pretty%250AFlowers")}, {flags: "layer_apply", gravity: "west", x: 10} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("lotus_flower.mp4").resize(scale().width(500)).overlay( source( text( "Pretty%0AFlowers", new TextStyle("Verdana", 50) .fontWeight("bold") .lineSpacing(-15) ) ).position( new Position() .gravity(compass("west")) .offsetX(10) ) ); ``` ## Auto-line breaks Cloudinary can also automatically wrap your text into multiple lines based on a specified maximum width for the text string. To do this, apply the `fit` crop mode to the text layer and specify the `width` to use for word wrapping. This setting tells Cloudinary to automatically wrap the actual text content onto a new line once the width is reached. > **NOTES**: > > * Automatic text wrapping is only supported when you specify a numeric pixel width for your text layer together with the fit crop mode, for example `w_220,c_fit`. Percentage-based widths are not supported for text wrapping. Relative widths or using `fl_relative` will resize the text layer but **won't** trigger automatic line breaks. > * `c_fit` (called `textFit` in the latest major version of some SDKs) is the only 'resize' option that you can use as a qualifier of text overlays. For example, to add a long text string in bold Neucha font with a size of 26 pixels to the base video that wraps at a width of 400 pixels: ![Multi-line text string](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.,w_400/fl_layer_apply/flowers.jpg) ```nodejs cloudinary.image("flowers.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react new CloudinaryImage("flowers.jpg").addTransformation( "c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply" ); ``` ```vue new CloudinaryImage("flowers.jpg").addTransformation( "c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply" ); ``` ```angular new CloudinaryImage("flowers.jpg").addTransformation( "c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply" ); ``` ```js new CloudinaryImage("flowers.jpg").addTransformation( "c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply" ); ``` ```python CloudinaryImage("flowers.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'crop': "fit"}, {'flags': "layer_apply"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\TextFit; use Cloudinary\Transformation\FontWeight; (new ImageTag('flowers.jpg')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26)) ->fontWeight( FontWeight::bold()) ) ->textFit( TextFit::size(400)) )); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain() .flags("layer_apply")).imageTag("flowers.jpg"); ``` ```ruby cl_image_tag("flowers.jpg", transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"}, {flags: "layer_apply"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Crop("fit").Chain() .Flags("layer_apply")).BuildImageTag("flowers.jpg") ``` ```dart cloudinary.image('flowers.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setCrop("fit").chain() .setFlags("layer_apply")).generate("flowers.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain() .flags("layer_apply")).generate("flowers.jpg"); ``` ```flutter cloudinary.image('flowers.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply")); ``` ```kotlin cloudinary.image { publicId("flowers.jpg") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",TextStyle("Neucha",26) { fontWeight( FontWeight.bold()) }) { textFit( TextFit.size(400)) })) }.generate() ``` ```jquery $.cloudinary.image("flowers.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react_native new CloudinaryImage("flowers.jpg").addTransformation( "c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply" ); ``` ![Multi-line text string](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.,w_400/fl_layer_apply/lotus_flower.mp4) ```nodejs cloudinary.video("lotus_flower", {transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react new CloudinaryVideo("lotus_flower.mp4").addTransformation( "c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply" ); ``` ```vue new CloudinaryVideo("lotus_flower.mp4").addTransformation( "c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply" ); ``` ```angular new CloudinaryVideo("lotus_flower.mp4").addTransformation( "c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply" ); ``` ```js new CloudinaryVideo("lotus_flower.mp4").addTransformation( "c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply" ); ``` ```python CloudinaryVideo("lotus_flower").video(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'crop': "fit"}, {'flags': "layer_apply"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\TextFit; use Cloudinary\Transformation\FontWeight; (new VideoTag('lotus_flower.mp4')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26)) ->fontWeight( FontWeight::bold()) ) ->textFit( TextFit::size(400)) )); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain() .flags("layer_apply")).videoTag("lotus_flower"); ``` ```ruby cl_video_tag("lotus_flower", transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"}, {flags: "layer_apply"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Crop("fit").Chain() .Flags("layer_apply")).BuildVideoTag("lotus_flower") ``` ```dart cloudinary.video('lotus_flower.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setCrop("fit").chain() .setFlags("layer_apply")).generate("lotus_flower.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain() .flags("layer_apply")).resourceType("video").generate("lotus_flower.mp4"); ``` ```flutter cloudinary.video('lotus_flower.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply")); ``` ```kotlin cloudinary.video { publicId("lotus_flower.mp4") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",TextStyle("Neucha",26) { fontWeight( FontWeight.bold()) }) { textFit( TextFit.size(400)) })) }.generate() ``` ```jquery $.cloudinary.video("lotus_flower", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react_native new CloudinaryVideo("lotus_flower.mp4").addTransformation( "c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply" ); ``` When using the `fit` (`textFit` in some SDKs) crop mode, you must specify a width for your text overlay, but height is optional. Line breaks are applied as needed to achieve the requested width and/or height rectangle. The specified font size of your overlay stays as is, even if the resulting text overlay height exceeds the height of its hosting video. So, if you don't limit the overlay height, the height of the image expands to accommodate large texts: ![Multi-line text no height limit](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.,w_400/fl_layer_apply/flowers.jpg) ```nodejs cloudinary.image("flowers.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react new CloudinaryImage('flowers.jpg') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply"); ``` ```vue new CloudinaryImage('flowers.jpg') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply"); ``` ```angular new CloudinaryImage('flowers.jpg') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply"); ``` ```js new CloudinaryImage('flowers.jpg') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply"); ``` ```python CloudinaryImage("flowers.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'crop': "fit"}, {'flags': "layer_apply"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\TextFit; use Cloudinary\Transformation\FontWeight; (new ImageTag('flowers.jpg')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26)) ->fontWeight( FontWeight::bold()) ) ->textFit( TextFit::size(400)) )); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain() .flags("layer_apply")).imageTag("flowers.jpg"); ``` ```ruby cl_image_tag("flowers.jpg", transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"}, {flags: "layer_apply"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Crop("fit").Chain() .Flags("layer_apply")).BuildImageTag("flowers.jpg") ``` ```dart cloudinary.image('flowers.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setCrop("fit").chain() .setFlags("layer_apply")).generate("flowers.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain() .flags("layer_apply")).generate("flowers.jpg"); ``` ```flutter cloudinary.image('flowers.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply")); ``` ```kotlin cloudinary.image { publicId("flowers.jpg") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",TextStyle("Neucha",26) { fontWeight( FontWeight.bold()) }) { textFit( TextFit.size(400)) })) }.generate() ``` ```jquery $.cloudinary.image("flowers.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react_native new CloudinaryImage('flowers.jpg') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply"); ``` ![Multi-line text no height limit](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.,w_400/fl_layer_apply/lotus_flower.mp4 "width:500") ```nodejs cloudinary.video("lotus_flower", {transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react new CloudinaryVideo('lotus_flower.mp4') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply"); ``` ```vue new CloudinaryVideo('lotus_flower.mp4') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply"); ``` ```angular new CloudinaryVideo('lotus_flower.mp4') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply"); ``` ```js new CloudinaryVideo('lotus_flower.mp4') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply"); ``` ```python CloudinaryVideo("lotus_flower").video(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'crop': "fit"}, {'flags': "layer_apply"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\TextFit; use Cloudinary\Transformation\FontWeight; (new VideoTag('lotus_flower.mp4')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26)) ->fontWeight( FontWeight::bold()) ) ->textFit( TextFit::size(400)) )); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain() .flags("layer_apply")).videoTag("lotus_flower"); ``` ```ruby cl_video_tag("lotus_flower", transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"}, {flags: "layer_apply"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Crop("fit").Chain() .Flags("layer_apply")).BuildVideoTag("lotus_flower") ``` ```dart cloudinary.video('lotus_flower.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setCrop("fit").chain() .setFlags("layer_apply")).generate("lotus_flower.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain() .flags("layer_apply")).resourceType("video").generate("lotus_flower.mp4"); ``` ```flutter cloudinary.video('lotus_flower.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply")); ``` ```kotlin cloudinary.video { publicId("lotus_flower.mp4") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",TextStyle("Neucha",26) { fontWeight( FontWeight.bold()) }) { textFit( TextFit.size(400)) })) }.generate() ``` ```jquery $.cloudinary.video("lotus_flower", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react_native new CloudinaryVideo('lotus_flower.mp4') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply"); ``` If you do limit the height of your overlay, any text that does not fit within the space defined is cut and an ellipsis (`...`) is added to the end of the text string to indicate that the text was truncated. To define a maximum height for the multi-line text add the `height` parameter in addition to `width` in the 'resize' transformation of your text layer: ![Multi-line text limited height](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.,w_400,h_250/fl_layer_apply/flowers.jpg) ```nodejs cloudinary.image("flowers.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, height: 250, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react new CloudinaryImage('flowers.jpg') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply"); ``` ```vue new CloudinaryImage('flowers.jpg') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply"); ``` ```angular new CloudinaryImage('flowers.jpg') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply"); ``` ```js new CloudinaryImage('flowers.jpg') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply"); ``` ```python CloudinaryImage("flowers.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'height': 250, 'crop': "fit"}, {'flags': "layer_apply"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\TextFit; use Cloudinary\Transformation\FontWeight; (new ImageTag('flowers.jpg')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26)) ->fontWeight( FontWeight::bold()) ) ->textFit( TextFit::size(400)->height(250)) )); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).height(250).crop("fit").chain() .flags("layer_apply")).imageTag("flowers.jpg"); ``` ```ruby cl_image_tag("flowers.jpg", transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, height: 250, crop: "fit"}, {flags: "layer_apply"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Height(250).Crop("fit").Chain() .Flags("layer_apply")).BuildImageTag("flowers.jpg") ``` ```dart cloudinary.image('flowers.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setHeight(250).setCrop("fit").chain() .setFlags("layer_apply")).generate("flowers.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).height(250).crop("fit").chain() .flags("layer_apply")).generate("flowers.jpg"); ``` ```flutter cloudinary.image('flowers.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply")); ``` ```kotlin cloudinary.image { publicId("flowers.jpg") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",TextStyle("Neucha",26) { fontWeight( FontWeight.bold()) }) { textFit( TextFit.size(400) { height(250) }) })) }.generate() ``` ```jquery $.cloudinary.image("flowers.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, height: 250, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react_native new CloudinaryImage('flowers.jpg') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply"); ``` ![Multi-line text limited height](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.,w_400,h_250/fl_layer_apply/lotus_flower.mp4 "width:500") ```nodejs cloudinary.video("lotus_flower", {transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, height: 250, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react new CloudinaryVideo('lotus_flower.mp4') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply"); ``` ```vue new CloudinaryVideo('lotus_flower.mp4') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply"); ``` ```angular new CloudinaryVideo('lotus_flower.mp4') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply"); ``` ```js new CloudinaryVideo('lotus_flower.mp4') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply"); ``` ```python CloudinaryVideo("lotus_flower").video(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'height': 250, 'crop': "fit"}, {'flags': "layer_apply"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\TextFit; use Cloudinary\Transformation\FontWeight; (new VideoTag('lotus_flower.mp4')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26)) ->fontWeight( FontWeight::bold()) ) ->textFit( TextFit::size(400)->height(250)) )); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).height(250).crop("fit").chain() .flags("layer_apply")).videoTag("lotus_flower"); ``` ```ruby cl_video_tag("lotus_flower", transformation: [ {width: 500, crop: "scale"}, {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, height: 250, crop: "fit"}, {flags: "layer_apply"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Height(250).Crop("fit").Chain() .Flags("layer_apply")).BuildVideoTag("lotus_flower") ``` ```dart cloudinary.video('lotus_flower.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setHeight(250).setCrop("fit").chain() .setFlags("layer_apply")).generate("lotus_flower.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).height(250).crop("fit").chain() .flags("layer_apply")).resourceType("video").generate("lotus_flower.mp4"); ``` ```flutter cloudinary.video('lotus_flower.mp4').transformation(Transformation() .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply")); ``` ```kotlin cloudinary.video { publicId("lotus_flower.mp4") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",TextStyle("Neucha",26) { fontWeight( FontWeight.bold()) }) { textFit( TextFit.size(400) { height(250) }) })) }.generate() ``` ```jquery $.cloudinary.video("lotus_flower", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0A%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, height: 250, crop: "fit"}, {flags: "layer_apply"} ]}) ``` ```react_native new CloudinaryVideo('lotus_flower.mp4') .addTransformation("c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400,h_250/fl_layer_apply"); ``` You can also set text alignment and line spacing values to further control the text's appearance. Other resize parameters can be applied as an action over the entire overlay (before the fl_layer_apply) to resize the resulting the text-image overlay as a whole after it's created. For example, to add a long text string in center aligned bold Times font with a size of 14 pixels to the base video, that wraps at a width of 200 pixels and is limited to a height of 150 pixels; and then rotate the text by 9 degrees and set 30 pixels from the north border to better align with the underlying video: ![Multi-line text limited with height](https://res.cloudinary.com/demo/image/upload/c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.,w_200/a_9/fl_layer_apply,g_north,y_30/envelope.jpg) ```nodejs cloudinary.image("envelope.jpg", {transformation: [ {width: 300, crop: "scale"}, {height: 150, overlay: {font_family: "Times", font_size: 18, font_weight: "bold", text_align: "center", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 200, crop: "fit"}, {angle: 9}, {flags: "layer_apply", gravity: "north", y: 30} ]}) ``` ```react new CloudinaryImage("envelope.jpg").addTransformation( "c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30" ); ``` ```vue new CloudinaryImage("envelope.jpg").addTransformation( "c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30" ); ``` ```angular new CloudinaryImage("envelope.jpg").addTransformation( "c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30" ); ``` ```js new CloudinaryImage("envelope.jpg").addTransformation( "c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30" ); ``` ```python CloudinaryImage("envelope.jpg").image(transformation=[ {'width': 300, 'crop': "scale"}, {'height': 150, 'overlay': {'font_family': "Times", 'font_size': 18, 'font_weight': "bold", 'text_align': "center", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 200, 'crop': "fit"}, {'angle': 9}, {'flags': "layer_apply", 'gravity': "north", 'y': 30} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Rotate; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\TextFit; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\TextAlignment; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('envelope.jpg')) ->resize(Resize::scale()->width(300)) ->overlay(Overlay::source( Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Times",18)) ->fontWeight( FontWeight::bold()) ->textAlignment( TextAlignment::center()) ) ->textFit( TextFit::size(200)->height(150)) ->transformation((new Transformation()) ->rotate(Rotate::byAngle(9))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::north())) ->offsetY(30)) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(300).crop("scale").chain() .height(150).overlay(new TextLayer().fontFamily("Times").fontSize(18).fontWeight("bold").textAlign("center").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(200).crop("fit").chain() .angle(9).chain() .flags("layer_apply").gravity("north").y(30)).imageTag("envelope.jpg"); ``` ```ruby cl_image_tag("envelope.jpg", transformation: [ {width: 300, crop: "scale"}, {height: 150, overlay: {font_family: "Times", font_size: 18, font_weight: "bold", text_align: "center", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 200, crop: "fit"}, {angle: 9}, {flags: "layer_apply", gravity: "north", y: 30} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(300).Crop("scale").Chain() .Height(150).Overlay(new TextLayer().FontFamily("Times").FontSize(18).FontWeight("bold").TextAlign("center").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(200).Crop("fit").Chain() .Angle(9).Chain() .Flags("layer_apply").Gravity("north").Y(30)).BuildImageTag("envelope.jpg") ``` ```dart cloudinary.image('envelope.jpg').transformation(Transformation() .addTransformation("c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(300).setCrop("scale").chain() .setHeight(150).setOverlay("text:Times_18_bold_center:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(200).setCrop("fit").chain() .setAngle(9).chain() .setFlags("layer_apply").setGravity("north").setY(30)).generate("envelope.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(300).crop("scale").chain() .height(150).overlay(new TextLayer().fontFamily("Times").fontSize(18).fontWeight("bold").textAlign("center").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(200).crop("fit").chain() .angle(9).chain() .flags("layer_apply").gravity("north").y(30)).generate("envelope.jpg"); ``` ```flutter cloudinary.image('envelope.jpg').transformation(Transformation() .addTransformation("c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30")); ``` ```kotlin cloudinary.image { publicId("envelope.jpg") resize(Resize.scale() { width(300) }) overlay(Overlay.source( Source.text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",TextStyle("Times",18) { fontWeight( FontWeight.bold()) textAlignment( TextAlignment.center()) }) { textFit( TextFit.size(200) { height(150) }) transformation(Transformation { rotate(Rotate.byAngle(9)) }) }) { position(Position() { gravity( Gravity.compass( Compass.north())) offsetY(30) }) }) }.generate() ``` ```jquery $.cloudinary.image("envelope.jpg", {transformation: [ {width: 300, crop: "scale"}, {height: 150, overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(18).fontWeight("bold").textAlign("center").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 200, crop: "fit"}, {angle: 9}, {flags: "layer_apply", gravity: "north", y: 30} ]}) ``` ```react_native new CloudinaryImage("envelope.jpg").addTransformation( "c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30" ); ``` ![Multi-line text limited with height](https://res.cloudinary.com/demo/video/upload/c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.,w_200/a_9/fl_layer_apply,g_north,y_30/lotus_flower.mp4) ```nodejs cloudinary.video("lotus_flower", {transformation: [ {width: 300, crop: "scale"}, {height: 150, overlay: {font_family: "Times", font_size: 18, font_weight: "bold", text_align: "center", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 200, crop: "fit"}, {angle: 9}, {flags: "layer_apply", gravity: "north", y: 30} ]}) ``` ```react new CloudinaryVideo("lotus_flower.mp4").addTransformation( "c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30" ); ``` ```vue new CloudinaryVideo("lotus_flower.mp4").addTransformation( "c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30" ); ``` ```angular new CloudinaryVideo("lotus_flower.mp4").addTransformation( "c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30" ); ``` ```js new CloudinaryVideo("lotus_flower.mp4").addTransformation( "c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30" ); ``` ```python CloudinaryVideo("lotus_flower").video(transformation=[ {'width': 300, 'crop': "scale"}, {'height': 150, 'overlay': {'font_family': "Times", 'font_size': 18, 'font_weight': "bold", 'text_align': "center", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 200, 'crop': "fit"}, {'angle': 9}, {'flags': "layer_apply", 'gravity': "north", 'y': 30} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Rotate; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\TextFit; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\TextAlignment; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new VideoTag('lotus_flower.mp4')) ->resize(Resize::scale()->width(300)) ->overlay(Overlay::source( Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Times",18)) ->fontWeight( FontWeight::bold()) ->textAlignment( TextAlignment::center()) ) ->textFit( TextFit::size(200)->height(150)) ->transformation((new Transformation()) ->rotate(Rotate::byAngle(9))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::north())) ->offsetY(30)) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(300).crop("scale").chain() .height(150).overlay(new TextLayer().fontFamily("Times").fontSize(18).fontWeight("bold").textAlign("center").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(200).crop("fit").chain() .angle(9).chain() .flags("layer_apply").gravity("north").y(30)).videoTag("lotus_flower"); ``` ```ruby cl_video_tag("lotus_flower", transformation: [ {width: 300, crop: "scale"}, {height: 150, overlay: {font_family: "Times", font_size: 18, font_weight: "bold", text_align: "center", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 200, crop: "fit"}, {angle: 9}, {flags: "layer_apply", gravity: "north", y: 30} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(300).Crop("scale").Chain() .Height(150).Overlay(new TextLayer().FontFamily("Times").FontSize(18).FontWeight("bold").TextAlign("center").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(200).Crop("fit").Chain() .Angle(9).Chain() .Flags("layer_apply").Gravity("north").Y(30)).BuildVideoTag("lotus_flower") ``` ```dart cloudinary.video('lotus_flower.mp4').transformation(Transformation() .addTransformation("c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(300).setCrop("scale").chain() .setHeight(150).setOverlay("text:Times_18_bold_center:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(200).setCrop("fit").chain() .setAngle(9).chain() .setFlags("layer_apply").setGravity("north").setY(30)).generate("lotus_flower.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(300).crop("scale").chain() .height(150).overlay(new TextLayer().fontFamily("Times").fontSize(18).fontWeight("bold").textAlign("center").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(200).crop("fit").chain() .angle(9).chain() .flags("layer_apply").gravity("north").y(30)).resourceType("video").generate("lotus_flower.mp4"); ``` ```flutter cloudinary.video('lotus_flower.mp4').transformation(Transformation() .addTransformation("c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30")); ``` ```kotlin cloudinary.video { publicId("lotus_flower.mp4") resize(Resize.scale() { width(300) }) overlay(Overlay.source( Source.text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",TextStyle("Times",18) { fontWeight( FontWeight.bold()) textAlignment( TextAlignment.center()) }) { textFit( TextFit.size(200) { height(150) }) transformation(Transformation { rotate(Rotate.byAngle(9)) }) }) { position(Position() { gravity( Gravity.compass( Compass.north())) offsetY(30) }) }) }.generate() ``` ```jquery $.cloudinary.video("lotus_flower", {transformation: [ {width: 300, crop: "scale"}, {height: 150, overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(18).fontWeight("bold").textAlign("center").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 200, crop: "fit"}, {angle: 9}, {flags: "layer_apply", gravity: "north", y: 30} ]}) ``` ```react_native new CloudinaryVideo("lotus_flower.mp4").addTransformation( "c_scale,w_300/c_fit,h_150,l_text:Times_18_bold_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_200/a_9/fl_layer_apply,g_north,y_30" ); ``` ## Special characters Text strings containing special characters need to be modified (escaped) for use with the text overlay feature. This is relevant for any special characters that would not be allowed "as is" in a valid URL path, as well as other special Unicode characters. These text strings should be escaped using %-based UTF-8 encoding to ensure the text string is valid (for example, replace `?` with `%3F` and use `%20` for spaces between words). This encoding is handled automatically when embedding asset using the Cloudinary SDK [helper methods](image_transformations#embedding_images_in_web_pages), but you must handle it when manually building the asset delivery URL. ## Characters that require double-encoding To include a comma (`,`) forward slash (`/`), percent sign (`%`) or an **emoji** character in a text overlay, you must **double-encode** the `%` sign within those codes. For example: * Add a comma to a text overlay as `%252C` (and not just `%2C`). * Similarly, to ensure that a slash isn't treated as a chained transformation separator in your URL, use `%252F` for slashes. * Alternatively, you can use the Unicode **division slash** U+2215 (visually similar to `/`) and URL-encode it as `%E2%88%95`, for example: `l_text:Arial_80:Comfort%E2%88%95emoji`. * The encoded value for the flower emoji is `%E2%9D%80`. To include this emoji in a text overlay, you must also escape (encode) each of the `%` signs using `%25` within the value: `l_text:Arial_80:Comfort%25E2%259D%2580`: ![Adding double-encoded emoji text overlay to image](https://res.cloudinary.com/demo/image/upload/w_500/l_text:Arial_40:Comfort%25E2%259D%2580/blank_shirt.jpg "with_image:true, with_code:false") ![Adding double-encoded emoji text overlay to video](https://res.cloudinary.com/demo/video/upload/w_500/l_text:Arial_40:Comfort%25E2%259D%2580/docs/hotel_room.mp4 "with_image:true, with_code:false") > **TIP**: > > :title=Tip: Double-escaping an entire text segment > When manually building delivery URLs, a simple way to avoid mistakes is to **double-encode the entire text segment** so all reserved characters (e.g., `%`, `/`, `,`, `#`, `?`, as well as line breaks) are preserved. > For example: `l_text:arial_23:%252C%2520-%2520comma%250A%2520%253F%2520-%2520question%2520mark%250A%2520%252F%2520%255C%2520-%2520both%2520slashes%250A%2523%2520-%2520hash` > ![Adding double-encoded emoji text overlay to image](https://res.cloudinary.com/demo/image/upload/c_crop,w_500/l_text:arial_23:%252C%2520-%2520comma%250A%2520%253F%2520-%2520question%2520mark%250A%2520%252F%2520%255C%2520-%2520both%2520slashes%250A%2523%2520-%2520hash/w_250/blank_shirt.jpg "with_code:false") ## Chinese and Japanese text overlays The following Chinese and Japanese font families are available by default and can be used directly as the `font_family` value for text overlays: ### Chinese font families * AR PL KaitiM GB * AR PL UKai CN * Firefly Sung * WenQuanYi Micro Hei * WenQuanYi Micro Hei Mono * WenQuanYi Zen Hei * WenQuanYi Zen Hei Mono * WenQuanYi Zen Hei Sharp For example: ![Chinese text overlay](https://res.cloudinary.com/demo/image/upload/w_240/l_text:AR%20PL%20KaitiM%20GB_50:%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C,g_north,y_10/mountain.jpg "with_image:true, with_code:false") ![Chinese text overlay](https://res.cloudinary.com/demo/video/upload/w_500/l_text:AR%20PL%20KaitiM%20GB_50:%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C,g_south,y_10/docs/hotel_room.mp4 "width:650, with_image:true, with_code:false") > **TIP**: If you want to reuse the same text styling in multiple transformations, generate the text with the Upload API `text` method and then reference it as described in [Predefined text templates](#predefined_text_templates). ### Japanese font families * TakaoExGothic * TakaoExMincho * TakaoGothic * TakaoMincho * TakaoPGothic * TakaoPMincho For example: ![Japanese text overlay](https://res.cloudinary.com/demo/image/upload/w_400/l_text:jp_takao:%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89,g_south_west,y_10,x_10/brown_sheep.jpg "with_image:true, with_code:false") ![Japanese text overlay](https://res.cloudinary.com/demo/video/upload/w_500/l_text:jp_takao:%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89,g_south,y_10/docs/hotel_room.mp4 "width:650, with_image:true, with_code:false") ## Experiment with text overlays Explore text overlay options interactively. Adjust the **text**, **font**, **font size**, **opacity**, and **color** to see how they affect your video: Text Layer Playground Text: Font: Arial Times New Roman Courier Georgia Verdana Impact Roboto Pacifico Font Size: 60px Opacity: 100% Color: White Black Red Blue Yellow Green Purple Orange Preview: Transformation URL: c_fill,w_400,h_300/l_text:Impact_60:Hello%20World,co_white/fl_layer_apply,g_center .select-wrapper { position: relative; width: 200px; margin-bottom: 20px; } .custom-select { position: relative; width: 100%; } .select-selected { background-color: var(--dropdown-menu-bg-color); padding: 10px 35px 10px 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; } .select-selected::after { content: '\25BC'; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); pointer-events: none; } .select-items { position: absolute; background-color: var(--dropdown-menu-bg-color); top: 100%; left: 0; right: 0; z-index: 99; border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; max-height: 300px; overflow-y: auto; display: none; } .select-item { padding: 10px; cursor: pointer; } .select-item:hover { background-color: var(--dropdown-background-active-color); } .language-icon { width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; } select { appearance: none; -webkit-appearance: none; width: 100%; padding: 10px 35px 10px 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; background-color: var(--dropdown-menu-bg-color); cursor: pointer; } .select-wrapper::after { content: '\25BC'; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); pointer-events: none; } /* .custom-select { position: relative; width: 200px; } .select-selected { background-color: #fff; border: 1px solid #ccc; padding: 8px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; } .select-selected:after { content: "\25BC"; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } .select-items { position: absolute; background-color: #fff; top: 100%; left: 0; right: 0; z-index: 99; border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; } .select-hide { display: none; } .select-items div { padding: 8px; cursor: pointer; display: flex; align-items: center; } .select-items div:hover { background-color: #f1f1f1; } .language-icon { width: 20px; height: 20px; margin-right: 8px; } */ .select-css-pocs { display: block; font-size: 16px; font-family: sans-serif; font-weight: 700; color: #3448c5; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 100%; max-width: 100%; /* useful when width is set to anything other than 100% */ box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); border-radius: .5em; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference */ background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%233448c5%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat, repeat; /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/ background-position: right .7em top 50%, 0 0; /* icon size, then gradient */ background-size: .65em auto, 100%; } /* CSS for demos */ .select-css { display: block; font-size: 16px; font-family: sans-serif; font-weight: 700; color: #FF5050; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 100%; max-width: 100%; /* useful when width is set to anything other than 100% */ box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); border-radius: .5em; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference */ background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF5050%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat, repeat; /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/ background-position: right .7em top 50%, 0 0; /* icon size, then gradient */ background-size: .65em auto, 100%; } /* Hide arrow icon in IE browsers */ .select-css::-ms-expand { display: none; } /* Hover style */ .select-css:hover { border-color: #888; } /* Focus style */ .select-css:focus { border-color: #FF5050; /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */ box-shadow: 0 0 1px 3px rgba(255, 80, 80, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #FF5050; outline: none; } /* Set options to normal weight */ .select-css option { font-weight:normal; } /* Support for rtl text, explicit support for Arabic and Hebrew */ *[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css { background-position: left .7em top 50%, 0 0; padding: .6em .8em .5em 1.4em; } /* Disabled styles */ .select-css:disabled, .select-css[aria-disabled=true] { color: graytext; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); } .select-css:disabled:hover, .select-css[aria-disabled=true] { border-color: #aaa; } table{ table-layout: fixed; } .time_warn{ color: #FF0000; font-size:12px; } .instructions{ font-family: Tahoma; text-align: center; padding-left: 10%; padding-right: 10%; color: #0c163b; } .instructions-large{ font-family: Tahoma; text-align: center; font-size:20px; padding-left: 10%; padding-right: 10%; color: #0c163b; } .selectcontainer { color: #FF5050; font-weight: bold; font-size:90%; } .selectcontainer-padleft { color: #FF5050; font-weight: bold; font-size:90%; padding-left: 15%; } .size_value{ color: #FF5050; font-weight: bold; } .thumb-img { border: solid 6px #aaa; border-radius: 6px; opacity: 0.5; } .thumb-img:hover { border: solid 6px #FF8383; border-radius: 6px; cursor: pointer; opacity: 1; } .thumb-img.active { border: solid 6px #FF5050; border-radius: 6px; opacity: 1; } .art-img, .photo-img { border: solid 6px #aaa; border-radius: 6px; opacity: 0.5; } .art-img:hover, .photo-img:hover{ border: solid 6px #f5956c; border-radius: 6px; cursor: pointer; opacity: 1; } .art-img.active, .photo-img.active { border: solid 6px #FF5050; border-radius: 6px; opacity: 1; } .select_label{ color: #3448C5; font-weight: bold; } .select_label1{ color: #0c163b; font-weight: bold; font-size: 12px; } .select_label2{ color: #0c163b; font-weight: normal; } .env_select_label{ color: #3448C5; font-weight: bold; padding-left: 15%; } .sliders{ display: inline; } .slider_value{ color: #FF5050; font-weight: bold; } .slider_label{ color: #3448C5; font-weight: bold; padding-left: 15%; } .step_number { background: black; color: white; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; border-radius: 100px; } .slidecontainer { width: 85%; /* Width of the outside container */ text-align: center; float: right; padding-right: 15%; } /* The slider itself */ /* Mouse-over effects */ .slider:hover { opacity: 1; /* Fully shown on mouse-over */ } .slider { -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #3448C5; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #FF5050; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #FF5050; cursor: pointer; } .cloudinary-button { display: inline-block; padding: 15px 25px; font-size: 18px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #FF5050; border: none; border-radius: 15px; box-shadow: 0 9px #999; } .cloudinary-button:hover { background-color: #ff0303; cursor: pointer; } .cloudinary-button:active { background-color: #ff0303; box-shadow: 0 5px #666; transform: translateY(4px); } .fix { display: block; } .loader { position: static; margin: auto; border: 16px solid #5A616A; border-top: 16px solid #3448C5; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .current-img { padding:8px 16px; } .demo-btn { border: 0px; background-color:#FF5050; border-radius:30px; display:inline-block; cursor:pointer; color:#ffffff; font-size:14px; font-weight:600;; padding:10px 16px; text-decoration:none; } .demo-btn:hover { background-color:#ff0303; } a.demo-btn:link, a.demo-btn:visited, a.demo-btn:hover, a.demo-btn:active { color: #ffffff; text-decoration:none; } .demo-btn:active { position:relative; top:1px; } span.mystep { background: #FF5050; border-radius: 0.8em; -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; color: #ffffff; display: inline-block; font-weight: bold; line-height: 1.6em; margin-right: 5px; text-align: center; width: 1.6em; } .coordinates { text-align: center; color: #0c163b; } .tr_all { display:inline-block; vertical-align:top; margin-left: 3em; margin-bottom: 1em; text-align: left; } .tl_all { display:inline-block; vertical-align:top; margin-right: 3em; margin-bottom: 1em; text-align: right; } .br_all { display:inline-block; vertical-align:top; margin-left: 3em; margin-bottom: 1em; text-align: left; } .bl_all { display:inline-block; vertical-align:top; margin-right: 3em; margin-bottom: 1em; text-align: right; } .options { font-size: 18px; font-weight: bold; color: #0c163b; } .coordinate-value { color: #FF5050; font-weight: bold; text-align: right; } /* Accessible Media Demo Styles */ /* Dark theme support for audio description demo */ [data-theme="dark"] .audio-description-demo { border-color: var(--dark-border) !important; background: var(--dark-bg) !important; color: var(--dark-text) !important; } [data-theme="dark"] .audio-description-demo h4 { color: var(--dark-border) !important; } /* Video player demo styles */ #wordHighlight { height: 400px; padding-top: unset; } #wordHighlight > div.vjs-poster > picture > img { object-fit: contain; } #wordHighlight > div.vjs-poster > picture { background: var(--main-content-color); } #wordHighlight.video-js { background-color: var(--main-content-color); } /* Dark theme support for colorblind demo */ [data-theme="dark"] .colorblind-demo { background-color: #2d3748 !important; border-color: #4a5568 !important; color: #e2e8f0 !important; } [data-theme="dark"] .colorblind-demo label { color: #e2e8f0 !important; } [data-theme="dark"] .colorblind-demo select { background-color: #4a5568 !important; color: #e2e8f0 !important; border: 1px solid #718096 !important; } [data-theme="dark"] .url-display { background-color: #2c5282 !important; border: 1px solid #3182ce !important; } [data-theme="dark"] .url-display h4 { color: #63b3ed !important; } [data-theme="dark"] .url-display code { color: #e2e8f0 !important; } [data-theme="dark"] .tips-section { background-color: #744210 !important; border: 1px solid #975a16 !important; } [data-theme="dark"] .tips-section h4 { color: #fbb041 !important; } [data-theme="dark"] .tips-section, [data-theme="dark"] .tips-section ul, [data-theme="dark"] .tips-section li { color: #faf089 !important; } /* Dark theme support for text overlay demo */ [data-theme="dark"] .text-overlay-demo label, [data-theme="dark"] .text-overlay-demo input, [data-theme="dark"] .text-overlay-demo select { --text-color: #e2e8f0; --input-bg: #2d3748; } /* Dark theme support for OCR text content */ [data-theme="dark"] .ocr-text-content { background: var(--dark-bg) !important; color: var(--dark-text) !important; } /* Dark theme support for audio mixing demo */ [data-theme="dark"] .db-status-container { background: var(--dark-bg) !important; color: var(--dark-text) !important; } /* Dark theme support for motion demo */ [data-theme="dark"] .motion-demo-container { border-color: var(--dark-border) !important; background: var(--dark-bg) !important; color: var(--dark-text) !important; } /* Dark theme support for gallery demo container */ [data-theme="dark"] #accessible-gallery-demo { background: #2d3748 !important; border-color: #4a90e2 !important; } [data-theme="dark"] #accessible-gallery-demo h4 { color: #4a90e2 !important; } [data-theme="dark"] #accessible-gallery-demo p { color: #e2e8f0 !important; } /* Dark theme support for keyboard controls */ [data-theme="dark"] .keyboard-controls-container { border-color: var(--dark-border) !important; background: var(--dark-bg) !important; color: var(--dark-text) !important; } [data-theme="dark"] .keyboard-controls-container h4 { color: var(--dark-border) !important; } [data-theme="dark"] .keyboard-key { background: var(--dark-kbd-bg) !important; color: var(--dark-kbd-text) !important; border-color: #718096 !important; } /* Dark theme support for video player demo */ [data-theme="dark"] .video-player-demo { border-color: var(--dark-border) !important; background: var(--dark-bg) !important; color: var(--dark-text) !important; } [data-theme="dark"] .video-player-demo h4 { color: var(--dark-border) !important; } [data-theme="dark"] .video-demo-features { color: var(--dark-subtext) !important; } /* Dark theme support for upload widget demo */ [data-theme="dark"] .upload-widget-demo { border-color: var(--dark-border) !important; background: var(--dark-bg) !important; color: var(--dark-text) !important; } [data-theme="dark"] .upload-widget-demo h4 { color: var(--dark-border) !important; } [data-theme="dark"] .upload-widget-demo > div:last-child { color: var(--dark-subtext) !important; } /* Text Layer Demo Styles */ .text-layer-demo-container { --light-border: #0066cc; --light-bg: #f8f9fa; --light-text: #333; --light-input-bg: #fff; --light-url-bg: #f8fafc; --light-url-border: #e2e8f0; --dark-border: #4a90e2; --dark-bg: #2d3748; --dark-text: #e2e8f0; --dark-input-bg: #1a202c; --dark-url-bg: #1e293b; --dark-url-border: #334155; border: 2px solid var(--light-border); border-radius: 8px; padding: 20px; background: var(--light-bg); color: var(--light-text); } .text-layer-demo-container h4 { margin-top: 0; color: var(--light-border); } .text-layer-demo-container .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 20px; } .text-layer-demo-container .controls-section { text-align: left; } .text-layer-demo-container .control-group { margin-bottom: 15px; } .text-layer-demo-container .control-group label { display: block; font-weight: bold; margin-bottom: 5px; } .text-layer-demo-container .checkbox-label { display: flex; align-items: center; cursor: pointer; font-weight: normal; } .text-layer-demo-container .demo-checkbox { margin-right: 8px; cursor: pointer; width: 18px; height: 18px; } .text-layer-demo-container .checkbox-label code { background: rgba(0, 0, 0, 0.05); padding: 2px 6px; border-radius: 3px; font-size: 0.9em; } .text-layer-demo-container .control-hint { font-size: 12px; color: #666; margin-top: 4px; font-style: italic; } .text-layer-demo-container .text-input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background: var(--light-input-bg); color: var(--light-text); box-sizing: border-box; } .text-layer-demo-container .demo-select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background: var(--light-input-bg); color: var(--light-text); } .text-layer-demo-container .text-input:focus, .text-layer-demo-container .demo-select:focus { outline: 2px solid #3448c5; outline-offset: 2px; } .text-layer-demo-container .preview-section { text-align: center; } .text-layer-demo-container .preview-label { margin-bottom: 10px; font-weight: bold; } .text-layer-demo-container .preview-image { max-width: 100%; height: auto; border-radius: 8px; border: 2px solid #ccc; } .text-layer-demo-container .preview-video { max-width: 100%; height: auto; border-radius: 8px; border: 2px solid #ccc; } .text-layer-demo-container .transformation-url-box { margin-top: 20px; padding: 15px; border: 2px solid var(--light-border); border-radius: 5px; font-family: monospace; font-size: 12px; word-break: break-all; text-align: left; background: var(--light-url-bg); } .text-layer-demo-container .transformation-url-box strong { display: block; margin-bottom: 8px; font-family: sans-serif; color: var(--light-text); } .text-layer-demo-container #transformation-url-link { color: var(--light-border); text-decoration: none; display: block; transition: opacity 0.2s ease; } .text-layer-demo-container #transformation-url-link:hover { opacity: 0.8; text-decoration: underline; } .text-layer-demo-container #transformation-url-display { color: inherit; } /* Dark theme support for text layer demo */ [data-theme="dark"] .text-layer-demo-container { border-color: var(--dark-border) !important; background: var(--dark-bg) !important; color: var(--dark-text) !important; } [data-theme="dark"] .text-layer-demo-container h4 { color: var(--dark-border) !important; } [data-theme="dark"] .text-layer-demo-container .text-input, [data-theme="dark"] .text-layer-demo-container .demo-select { background: var(--dark-input-bg) !important; color: var(--dark-text) !important; border-color: #4a5568 !important; } [data-theme="dark"] .text-layer-demo-container .transformation-url-box { background: var(--dark-url-bg) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .text-layer-demo-container .transformation-url-box strong { color: var(--dark-text) !important; } [data-theme="dark"] .text-layer-demo-container #transformation-url-link { color: var(--dark-border) !important; } [data-theme="dark"] .text-layer-demo-container .preview-image { border-color: #4a5568 !important; } [data-theme="dark"] .text-layer-demo-container .preview-video { border-color: #4a5568 !important; } [data-theme="dark"] .text-layer-demo-container .checkbox-label code { background: rgba(255, 255, 255, 0.1) !important; } [data-theme="dark"] .text-layer-demo-container .control-hint { color: #a0aec0 !important; } /* X-Cld-Error Inspector Tool Styles */ .x-cld-error-inspector { max-width: 800px; margin: 20px 0; padding: 20px; border: 1px solid var(--inspector-border, #ddd); border-radius: 8px; background-color: var(--inspector-bg, #f9f9f9); color: var(--inspector-text, #333); } .x-cld-error-inspector .input-wrapper { margin-bottom: 15px; } .x-cld-error-inspector label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--inspector-text, #333); } .x-cld-error-inspector input[type="text"] { width: 100%; padding: 10px; border: 1px solid var(--inspector-input-border, #ccc); border-radius: 4px; font-family: monospace; font-size: 14px; background-color: var(--inspector-input-bg, #fff); color: var(--inspector-text, #333); box-sizing: border-box; } .x-cld-error-inspector button.x-cld-inspect-btn { padding: 10px 25px; line-height: 1.4; background-color: var(--button-background-color); font-family: "Inter", Helvetica, Arial, sans-serif; color: var(--sign-up-button-color); font-weight: 600; font-size: 14px; text-transform: uppercase; border: none; border-radius: 20px; cursor: pointer; transition: filter 0.2s ease; } .x-cld-error-inspector button.x-cld-inspect-btn:hover { filter: brightness(85%); } .x-cld-error-inspector #result-container { margin-top: 20px; } .x-cld-error-inspector #loading { color: var(--inspector-loading, #666); } .x-cld-error-inspector .result-success { padding: 15px; background-color: var(--result-warning-bg, #fff3cd); border: 1px solid var(--result-warning-border, #ffc107); border-radius: 4px; margin-top: 10px; color: var(--inspector-text, #333); } .x-cld-error-inspector .result-error { padding: 15px; background-color: var(--result-error-bg, #f8d7da); border: 1px solid var(--result-error-border, #dc3545); border-radius: 4px; margin-top: 10px; color: var(--inspector-text, #333); } .x-cld-error-inspector .result-ok { padding: 15px; background-color: var(--result-success-bg, #d4edda); border: 1px solid var(--result-success-border, #28a745); border-radius: 4px; margin-top: 10px; color: var(--inspector-text, #333); } .x-cld-error-inspector .header-info { margin-top: 10px; padding: 10px; background-color: var(--header-info-bg, #e9ecef); border-radius: 4px; font-family: monospace; font-size: 13px; color: var(--inspector-text, #333); } .x-cld-error-inspector .header-label { font-weight: bold; color: var(--inspector-label, #495057); } /* Support for explicit dark theme class */ [data-theme="dark"] .x-cld-error-inspector { --inspector-border: #4a5568; --inspector-bg: #2d3748; --inspector-text: #e2e8f0; --inspector-input-border: #4a5568; --inspector-input-bg: #1a202c; --inspector-loading: #a0aec0; --inspector-label: #cbd5e0; --header-info-bg: #1a202c; --result-warning-bg: #744210; --result-warning-border: #d69e2e; --result-error-bg: #742a2a; --result-error-border: #fc8181; --result-success-bg: #22543d; --result-success-border: #48bb78; } /* Image Enhancement Demo Styles */ #image-enhancement-demo { max-width: 1200px; margin: 20px auto; padding: 20px; border: 1px solid var(--inspector-border, #ddd); border-radius: 8px; background-color: var(--inspector-bg, #f9f9f9); } #image-enhancement-demo h4 { color: var(--inspector-text, #333); margin-top: 0; } #image-thumbs { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; gap: 10px; } .thumb-container { text-align: center; margin: 10px; } .thumb-img { cursor: pointer; max-width: 150px; height: 100px; object-fit: cover; } .thumb-label { font-size: 12px; margin-top: 5px; color: var(--inspector-text, #333); } .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; } .image-section { margin-bottom: 20px; } .image-label-wrapper { margin-bottom: 10px; } .comparison-label { color: var(--inspector-text, #333); } .comparison-image { max-width: 100%; height: auto; border-radius: 4px; display: block; cursor: pointer; } .comparison-image.original { border: 2px solid var(--inspector-border, #ddd); } .comparison-image.enhanced { border: 2px solid #3448c5; } .enhancement-option-wrapper { margin-bottom: 15px; } .enhancement-option-label { display: flex; align-items: flex-start; cursor: pointer; padding: 12px; border-radius: 6px; border: 2px solid transparent; transition: all 0.2s ease; background: var(--inspector-input-bg, #fff); color: var(--inspector-text, #333); } .enhancement-option-label:hover { background: var(--dropdown-background-active-color, #f0f0f0); } .enhancement-option-label.selected { background: var(--inspector-input-bg, #fff); border-color: #3448c5; } .enhancement-option-label input[type="radio"] { margin-right: 10px; margin-top: 4px; } .enhancement-option-name { font-weight: bold; margin-bottom: 4px; } .enhancement-option-description { font-size: 13px; opacity: 0.8; } #transformation-url { margin-top: 20px; padding: 20px; background-color: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; } .url-link { text-decoration: none; } .url-code { background: #f1f5f9; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-family: 'Monaco', 'Menlo', 'Courier New', monospace; color: #0f172a; word-break: break-all; cursor: pointer; display: block; border: 1px solid #e2e8f0; transition: all 0.2s ease; } .url-code:hover { background: #e2e8f0; border-color: #cbd5e1; } #transformation-url > div { margin-bottom: 12px; } #transformation-url > div:last-child { margin-bottom: 0; } #transformation-url strong { color: #64748b; display: block; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .thumb-label { color: var(--inspector-text, #333); } .comparison-label { color: var(--inspector-text, #333); } /* Dark theme support for Image Enhancement Demo */ [data-theme="dark"] #image-enhancement-demo { background-color: #2d3748 !important; border-color: #4a5568 !important; color: #e2e8f0 !important; } [data-theme="dark"] #image-enhancement-demo h4 { color: #e2e8f0 !important; } [data-theme="dark"] .comparison-image.original { border-color: #4a5568; } [data-theme="dark"] #transformation-url { background-color: #1e293b !important; border: 1px solid #334155 !important; } [data-theme="dark"] #transformation-url strong { color: #94a3b8 !important; } [data-theme="dark"] .url-code { background: #1e293b; color: #94a3b8; border-color: #334155; } [data-theme="dark"] .url-code:hover { background: #334155; border-color: #475569; } [data-theme="dark"] .enhancement-option-label { background: #1a202c; color: #e2e8f0; } [data-theme="dark"] .enhancement-option-label:hover { background: #2d3748; } [data-theme="dark"] .enhancement-option-label.selected { background: #2d3748; border-color: #4a90e2 !important; } [data-theme="dark"] .thumb-label { color: #e2e8f0 !important; } [data-theme="dark"] .comparison-label { color: #e2e8f0 !important; } > **READING**: > > * [Layer syntax](video_layers): Learn the layer URL syntax and overlay types for videos. > * [Layer placement](video_layer_placement): Position layers using gravity, offsets, and dynamic tracking overlays. > * [Text layer fonts](video_text_layer_fonts): Custom fonts, Google Fonts, predefined templates, and text layer flags. > * [Transforming layers](video_layer_transformations): Apply transformations, multiple overlays, and relative sizing to layers.