{"id":28342,"date":"2021-05-18T22:02:52","date_gmt":"2021-05-18T22:02:52","guid":{"rendered":"http:\/\/add-video-bumper-with-react-and-cloudinary"},"modified":"2024-05-27T14:32:45","modified_gmt":"2024-05-27T21:32:45","slug":"add-video-bumper-with-react-and-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary\/","title":{"rendered":"Add a Video Bumper with React & Cloudinary"},"content":{"rendered":"

Custom bumpers at the beginning of videos can create a consistent experience that makes your content feel more professional and branded. In this tutorial, we\u2019ll learn how to use Cloudinary to insert a bumper<\/a> into any video. Then, we\u2019ll display the generated video 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 videos to Cloudinary. The fastest way to do this is by using the Cloudinary console<\/a>.<\/p>\n

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

https:\/\/res.cloudinary.com\/jlengstorf\/video\/upload\/mediajams\/disappointed-coffee.mp4\n<\/code><\/pre>\n
For the full video, we\u2019ll use this one:<\/p>\n
https:\/\/res.cloudinary.com\/jlengstorf\/video\/upload\/mediajams\/deploy-to-netlify.mp4\n<\/code><\/pre>\n
Once we\u2019re finished, we\u2019ll combine these two videos into a single video!<\/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, bumperId }<\/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 public ID 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 bumperId<\/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 public ID of the video asset, which is the name of the file on Cloudinary, including any folders. Using our example video from above, the public ID is mediajams\/deploy-to-netlify<\/code>.<\/p>\n
Finally, the bumperId<\/code> will contain the public ID of the bumper video. For our bumper above, the public ID is mediajams\/disappointed-coffee<\/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 that as the src<\/code> value in a video element, and return that from our component.<\/p>\n
    Add a bumper to our video<\/h2>\n
    Inserting the bumper requires what\u2019s known as splicing video<\/a>. The splice flag tells Cloudinary to concatenate the videos instead of laying them over the top of each other, which is the default behavior for video overlays<\/a>.<\/p>\n
    Setting the start offset transformation<\/a> to \u20180\u2019 moves the bumper to the beginning of the video (by default it would be added to the end), and setting the crop to fill<\/a> and the width to 600px ensures that the bumper is the same size as the video it\u2019s being added to.<\/p>\n
      function<\/span> Video<\/span>({ cloudName, videoId, bumperId }<\/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 overlays, replace folder slashes in public IDs with colons<\/span>\n+   const<\/span> bumper = bumperId.replace(\"\/\"<\/span>, \":\"<\/span>);\n+\n+   \/\/ splice in the bumper video at the beginning<\/span>\n+   \/\/ set it to the same width, and make sure it fills the space<\/span>\n+   videoSource += `\/l_video:${bumper}<\/span>,c_fill,w_600,fl_splice,so_0`<\/span>;\n\n    \/\/ set the public ID 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
    With our Video<\/code> component ready to insert bumpers, we can use it!<\/p>\n
    In any React app, add the component like this:<\/p>\n
    function<\/span> App<\/span>(<\/span>) <\/span>{\n  return<\/span> (\n    <main<\/span>><\/span>\n      <h1<\/span>><\/span>Video Bumpers With React & Cloudinary!<\/h1<\/span>><\/span>\n      <Video<\/span>\n        cloudName<\/span>=\"jlengstorf\"<\/span>\n        bumperId<\/span>=\"mediajams\/disappointed-coffee\"<\/span>\n        videoId<\/span>=\"mediajams\/deploy-to-netlify\"<\/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
    The video that renders on-screen has a short bumper inserted at the beginning, allowing us to quickly level up the branding of any video we display on our site!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28343,"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-28342","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 Video Bumper with React & Cloudinary<\/title>\n<meta name=\"description\" content=\"Custom bumpers at the beginning of videos can create a consistent experience that makes your content feel more professional and branded. In this tutorial, we\u2019ll learn how to use Cloudinary to insert a bumper into any video. Then, we'll display the generated video 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-video-bumper-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 Video Bumper with React & Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Custom bumpers at the beginning of videos can create a consistent experience that makes your content feel more professional and branded. In this tutorial, we\u2019ll learn how to use Cloudinary to insert a bumper into any video. Then, we'll display the generated video in a React component.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-18T22:02:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-27T21:32:45+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.png?_i=AA\" \/>\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-video-bumper-with-react-and-cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Add a Video Bumper with React & Cloudinary\",\"datePublished\":\"2021-05-18T22:02:52+00:00\",\"dateModified\":\"2024-05-27T21:32:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.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-video-bumper-with-react-and-cloudinary\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary\",\"name\":\"Add a Video Bumper with React & Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.png?_i=AA\",\"datePublished\":\"2021-05-18T22:02:52+00:00\",\"dateModified\":\"2024-05-27T21:32:45+00:00\",\"description\":\"Custom bumpers at the beginning of videos can create a consistent experience that makes your content feel more professional and branded. In this tutorial, we\u2019ll learn how to use Cloudinary to insert a bumper into any video. Then, we'll display the generated video in a React component.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.png?_i=AA\",\"width\":2550,\"height\":1700},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add a Video Bumper with React & Cloudinary\"}]},{\"@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 Video Bumper with React & Cloudinary","description":"Custom bumpers at the beginning of videos can create a consistent experience that makes your content feel more professional and branded. In this tutorial, we\u2019ll learn how to use Cloudinary to insert a bumper into any video. Then, we'll display the generated video 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-video-bumper-with-react-and-cloudinary","og_locale":"en_US","og_type":"article","og_title":"Add a Video Bumper with React & Cloudinary","og_description":"Custom bumpers at the beginning of videos can create a consistent experience that makes your content feel more professional and branded. In this tutorial, we\u2019ll learn how to use Cloudinary to insert a bumper into any video. Then, we'll display the generated video in a React component.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2021-05-18T22:02:52+00:00","article_modified_time":"2024-05-27T21:32:45+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.png?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary\/"},"author":{"name":"","@id":""},"headline":"Add a Video Bumper with React & Cloudinary","datePublished":"2021-05-18T22:02:52+00:00","dateModified":"2024-05-27T21:32:45+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.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-video-bumper-with-react-and-cloudinary\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary","name":"Add a Video Bumper with React & Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.png?_i=AA","datePublished":"2021-05-18T22:02:52+00:00","dateModified":"2024-05-27T21:32:45+00:00","description":"Custom bumpers at the beginning of videos can create a consistent experience that makes your content feel more professional and branded. In this tutorial, we\u2019ll learn how to use Cloudinary to insert a bumper into any video. Then, we'll display the generated video in a React component.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.png?_i=AA","width":2550,"height":1700},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-video-bumper-with-react-and-cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add a Video Bumper with React & Cloudinary"}]},{"@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\/v1681924069\/Web_Assets\/blog\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2\/9a072a10ec6d36bc6babd311ed3c009b25e69bef-2550x1700-1_283434a2a2.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28342","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=28342"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28342\/revisions"}],"predecessor-version":[{"id":33951,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28342\/revisions\/33951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28343"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}