{"id":27819,"date":"2021-08-02T19:49:31","date_gmt":"2021-08-02T19:49:31","guid":{"rendered":"http:\/\/add-branding-watermark-to-video-with-react-and-cloudinary"},"modified":"2025-02-22T15:41:54","modified_gmt":"2025-02-22T23:41:54","slug":"add-branding-watermark-to-video-with-react-and-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/","title":{"rendered":"Add a Branding Watermark to Video With React"},"content":{"rendered":"

When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we\u2019ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Upload your assets to Cloudinary.<\/h2>\n

First, upload the video and the logo to Cloudinary. The fastest way to do this is using the Cloudinary console<\/a>.<\/p>\n

For this tutorial, we\u2019ll use the following video:<\/p>\n

https:\/\/res.cloudinary.com\/jlengstorf\/video\/upload\/mediajams\/disappointed-coffee.mp4\n<\/code><\/pre>\n
And the following logo:<\/p>\n
\"Learn<\/p>\n
https:\/\/res.cloudinary.com\/jlengstorf\/image\/upload\/mediajams\/logo.png\n<\/code><\/pre>\n
By the end of this tutorial, we\u2019ll place the logo image at the bottom right of the video to add branding.<\/p>\n
Create a Video Component in React<\/h2>\n
Before we add the logo, let\u2019s create a React component that displays our Cloudinary video.<\/p>\n
function<\/span> Video<\/span>({ cloudName, videoId, watermarkId }<\/span>) <\/span>{\n  \/\/ set up a Cloudinary URL to use your cloud name and display video<\/span>\n  let<\/span> videoSource = `https:\/\/res.cloudinary.com\/${cloudName}<\/span>\/video\/upload`<\/span>;\n\n  \/\/ automatically adjust the quality and set the video to 600px wide<\/span>\n  videoSource += \"\/q_auto,w_600\"<\/span>;\n\n  \/\/ set the publicId to display the video as an MP4<\/span>\n  videoSource += `\/${videoId}<\/span>.mp4`<\/span>;\n\n  \/\/ add the full URL to a standard HTML5 video element<\/span>\n  return<\/span> (\n    <video<\/span> controls<\/span>><\/span>\n      <source<\/span> src<\/span>={videoSource}<\/span> type<\/span>=\"video\/mp4\"<\/span> \/><\/span>\n    <\/video<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The component, which we\u2019ve named Video<\/code>, accepts three values as props: cloudName<\/code>, videoId<\/code>, and watermarkId<\/code>.<\/p>\n
The cloudName<\/code> should contain our Cloudinary cloud name, which is displayed at the top-right of the console.<\/p>\n
\"The<\/p>\n
The videoId<\/code> will contain the video asset\u2019s public ID, which is the name of the file on Cloudinary, including any folders. Using our example video from above, the public ID is mediajams\/disappointed-coffee<\/code>.<\/p>\n
Finally, the watermarkId<\/code> will contain the public ID of the logo asset. In the logo file above, the public ID is mediajams\/logo<\/code>.<\/p>\n
To set up our video, we build a Cloudinary URL that contains:<\/p>\n
    \n
  1. The public Cloudinary URL, https:\/\/res.cloudinary.com\/<\/code>\n<\/li>\n
  2. Our cloud name<\/li>\n
  3. The asset type, \/video\/upload\/<\/code>\n<\/li>\n
  4. Transformations to adjust the quality automatically, and resize to 600px wide: q_auto,w_600<\/code>\n<\/li>\n
  5. The public ID of our video<\/li>\n
  6. A file type of MP4 using a file extension<\/li>\n<\/ol>\n
    Once we have the URL, we can add it as the src<\/code> value in a video element, and return it from our component.<\/p>\n
    Add the logo to the bottom-right corner<\/h2>\n
    Right now, we\u2019re not using the watermark<\/a>. To add that in, we need to include an overlay<\/a> to the video.<\/p>\n
    Overlays in URLs are created by setting the public ID of the asset to overlay prefixed with l_<\/code>. Cloudinary uses the \/<\/code> character to denote groups of effects, so we need to replace all \/<\/code> characters in the public ID with a colon (:<\/code>).<\/p>\n
    Then, using the gravity transformation<\/a>, we move the image to the bottom-right corner, set its width to 100px, and nudge it 20px away from the right and bottom edges.<\/p>\n
      function<\/span> Video<\/span>({ cloudName, videoId, watermarkId }<\/span>) <\/span>{\n    \/\/ set up a Cloudinary URL to use your cloud name, and display video<\/span>\n    let<\/span> videoSource = `https:\/\/res.cloudinary.com\/${cloudName}<\/span>\/video\/upload`<\/span>;\n\n    \/\/ automatically adjust the quality, and set the video to 600px wide<\/span>\n    videoSource += \"\/q_auto,w_600\"<\/span>;\n\n    \/\/ for watermarks, replace folder slashes with colons<\/span>\n    const<\/span> watermark = `l_${watermarkId.replace(\"\/\"<\/span>, \":\"<\/span>)}<\/span>`<\/span>;\n\n+   \/\/ add the watermark to the bottom-right of the video,<\/span>\n+   \/\/ and set it to 100px wide, offset 20px from the edges<\/span>\n+   videoSource += `\/${watermark}<\/span>,g_south_east,w_100,x_20,y_20`<\/span>;\n+\n+   \/\/ set the publicId to display the video as an MP4<\/span>\n+   videoSource += `\/${videoId}<\/span>.mp4`<\/span>;\n\n    \/\/ add the full URL to a standard HTML5 video element<\/span>\n    return<\/span> (\n      <video<\/span> controls<\/span>><\/span>\n        <source<\/span> src<\/span>={videoSource}<\/span> type<\/span>=\"video\/mp4\"<\/span> \/><\/span>\n      <\/video<\/span>><\/span><\/span>\n    );\n  }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Display the branded video in a React component on screen.<\/h2>\n
    Now that we have our Video<\/code> component ready to add a logo watermark to our videos, we can render it on screen.<\/p>\n
    In any React app, we can use the component like this:<\/p>\n
    function<\/span> App<\/span>(<\/span>) <\/span>{\n  return<\/span> (\n    <main<\/span>><\/span>\n      <h1<\/span>><\/span>Branded Video With React & Cloudinary!<\/h1<\/span>><\/span>\n      <Video<\/span>\n        cloudName<\/span>=\"jlengstorf\"<\/span>\n        videoId<\/span>=\"mediajams\/disappointed-coffee\"<\/span>\n        watermarkId<\/span>=\"mediajams\/logo\"<\/span>\n      \/><\/span>\n    <\/main<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Setting the cloud name, video public ID, and logo public ID will render a branded video on screen!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27820,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,246,371,303],"class_list":["post-27819","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nAdd a Branding Watermark to Video With React<\/title>\n<meta name=\"description\" content=\"When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we\u2019ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add a Branding Watermark to Video With React\" \/>\n<meta property=\"og:description\" content=\"When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we\u2019ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-02T19:49:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-22T23:41:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1158\" \/>\n\t<meta property=\"og:image:height\" content=\"656\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Add a Branding Watermark to Video With React\",\"datePublished\":\"2021-08-02T19:49:31+00:00\",\"dateModified\":\"2025-02-22T23:41:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba.png?_i=AA\",\"keywords\":[\"Guest Post\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/\",\"name\":\"Add a Branding Watermark to Video With React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba.png?_i=AA\",\"datePublished\":\"2021-08-02T19:49:31+00:00\",\"dateModified\":\"2025-02-22T23:41:54+00:00\",\"description\":\"When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we\u2019ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba.png?_i=AA\",\"width\":1158,\"height\":656},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add a Branding Watermark to Video With React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Add a Branding Watermark to Video With React","description":"When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we\u2019ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/","og_locale":"en_US","og_type":"article","og_title":"Add a Branding Watermark to Video With React","og_description":"When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we\u2019ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/","og_site_name":"Cloudinary Blog","article_published_time":"2021-08-02T19:49:31+00:00","article_modified_time":"2025-02-22T23:41:54+00:00","og_image":[{"width":1158,"height":656,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/"},"author":{"name":"","@id":""},"headline":"Add a Branding Watermark to Video With React","datePublished":"2021-08-02T19:49:31+00:00","dateModified":"2025-02-22T23:41:54+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba.png?_i=AA","keywords":["Guest Post","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/","name":"Add a Branding Watermark to Video With React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba.png?_i=AA","datePublished":"2021-08-02T19:49:31+00:00","dateModified":"2025-02-22T23:41:54+00:00","description":"When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we\u2019ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba.png?_i=AA","width":1158,"height":656},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-branding-watermark-to-video-with-react-and-cloudinary\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add a Branding Watermark to Video With React"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924094\/Web_Assets\/blog\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba\/79f7a48db64ddda7b7f9682e18eaa92fe733c5c4-1158x656-1_278208beba.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27819"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27819\/revisions"}],"predecessor-version":[{"id":36967,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27819\/revisions\/36967"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27820"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}