{"id":28312,"date":"2021-05-18T22:02:40","date_gmt":"2021-05-18T22:02:40","guid":{"rendered":"http:\/\/Create-a-performant-YouTube-embed-with-a-native-web-component"},"modified":"2021-05-18T22:02:40","modified_gmt":"2021-05-18T22:02:40","slug":"create-a-performant-youtube-embed-with-a-native-web-component","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/","title":{"rendered":"Create a performant YouTube embed with a native web component"},"content":{"rendered":"

In this Media Jam, you will learn how to create a native web component that replaces the default YouTube iframe embed. We do this in order to avoid wasting resources while embedding an unused video embed. Many visitors might not watch the video, so why load all the stuff from the YouTube iframe? Let\u2019s be conscious of performance, and the carbon emissions your website produces. Less data over the wire is always better.<\/p>\n

This component creates the real YouTube iframe embed when the user clicks on the poster. Before it has been clicked, it looks like a real embed, and it only needs the YouTube video ID to work.<\/p>\n<\/div>\n \n

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

A native web component<\/h2>\n

Native web components have been around for a while, but they don\u2019t seem to be used too often. Frameworks like Vue and React do such a great job that most developers stick with them. This YouTube embed, however, uses a native web component. This way, you can drop it in any website or SPA, and it just works.<\/p>\n

This is a simple version of a potentially much bigger concept, through which iframe embeds can always be loaded through native web components to conserve bandwidth. Use this method if you don\u2019t want to use the loading="lazy"<\/code> HTML attribute that always loads the iframe when you scroll within a certain distance of it.<\/p>\n

There are some amazing implementations out there (Paul Irish did one close to this one) where they preload (and pre-connect) potential assets the embed will use. Options galore!<\/p>\n

Let\u2019s keep it simple<\/h2>\n

In this Jam, the code exemplifies the concept of using a native web component to create the embed. It is completely usable and ready for production, but it is simpler than the code you may be working with.<\/p>\n

To create a native web component, you need to extend the HTMLElement<\/code> class. In this case:<\/p>\n

class<\/span> youtubeEmbed<\/span> extends<\/span> HTMLElement<\/span> <\/span>{\n\t\/\/ do stuff<\/span>\n}\n\nwindow<\/span>.customElements.define(\"youtube-embed\"<\/span>, youtubeEmbed);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
That\u2019s it! You created a Native Web Component.<\/p>\n
To hook into the lifecycle of the custom element, we use the connectedCallback()<\/code> function and start creating DOM nodes and event listeners.<\/p>\n
The this<\/code> property represents the DOM node just defined. In our case: <youtube-embed><\/code>.<\/p>\n
How to mimic the YouTube embed<\/h2>\n
A YouTube embed, at the very least, has a poster image, a play button and works in a 16:9 ratio. These three things are achievable by a bit of vanilla JavaScript and some simple CSS.<\/p>\n
Let\u2019s first make sure the poster and the play button show up. To create the poster URL, we need the YouTube video ID. The video ID can be passed as an HTML attribute on the custom element.<\/p>\n
<youtube-embed<\/span> videoid<\/span>=\"6Ub_k4uvz20\"<\/span>><\/span><\/youtube-embed<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now that the attribute is added, you can retrieve it like you always do in vanilla JS: this.getAttribute('videoid')<\/code>.  With the video ID, you can now concatenate the poster URL, and add it as the background of the youtube-embed<\/code> element. CSS is used to style it properly. See the CodeSandBox link for more.<\/p>\n
The play button is added by creating it, and appending it to the DOM of the youtube-embed<\/code>.<\/p>\n
class<\/span> youtubeEmbed<\/span> extends<\/span> HTMLElement<\/span> <\/span>{\n  connectedCallback() {\n    this<\/span>.videoId = this<\/span>.getAttribute(\"videoid\"<\/span>);\n    this<\/span>.posterUrl = `https:\/\/i.ytimg.com\/vi\/${this<\/span>.videoId}<\/span>\/maxresdefault.jpg`<\/span>;\n    this<\/span>.style.backgroundImage = `url(\"${this<\/span>.posterUrl}<\/span>\")`<\/span>;\n\n    const<\/span> playBtnEl = document<\/span>.createElement(\"button\"<\/span>);\n    playBtnEl.classList.add(\"youtube-embed-play\"<\/span>);\n    this<\/span>.append(playBtnEl);\n\t}\n}\n\nwindow<\/span>.customElements.define(\"youtube-embed\"<\/span>, youtubeEmbed);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The only thing left to do is to create the real embed iframe when the user clicks the poster or the play button. The way to do that is to add an addEventListener<\/code> function to the whole youtube-embed<\/code> element.<\/p>\n
class<\/span> youtubeEmbed<\/span> extends<\/span> HTMLElement<\/span> <\/span>{\n  connectedCallback() {\n    this<\/span>.videoId = this<\/span>.getAttribute(\"videoid\"<\/span>);\n    this<\/span>.posterUrl = `https:\/\/i.ytimg.com\/vi\/${this<\/span>.videoId}<\/span>\/maxresdefault.jpg`<\/span>;\n    this<\/span>.style.backgroundImage = `url(\"${this<\/span>.posterUrl}<\/span>\")`<\/span>;\n\n    const<\/span> playBtnEl = document<\/span>.createElement(\"button\"<\/span>);\n    playBtnEl.classList.add(\"youtube-embed-play\"<\/span>);\n    this<\/span>.append(playBtnEl);\n\nthis<\/span>.addEventListener(\"click\"<\/span>, () => {\n      const<\/span> iframeEl = document<\/span>.createElement(\"iframe\"<\/span>);\n      iframeEl.width = 560<\/span>;\n      iframeEl.height = 315<\/span>;\n      iframeEl.allow =\n        \"accelerometer autoplay encrypted-media gyroscope picture-in-picture\"<\/span>;\n      iframeEl.allowFullscreen = true<\/span>;\n      iframeEl.src = `https:\/\/www.youtube.com\/embed\/${this<\/span>.videoId}<\/span>`<\/span>;\n      this<\/span>.append(iframeEl);\n      this<\/span>.classList.add(\"youtube-embed-ready\"<\/span>);\n      this<\/span>.querySelector(\"iframe\"<\/span>).focus();\n    });\n\t}\n}\n\nwindow<\/span>.customElements.define(\"youtube-embed\"<\/span>, youtubeEmbed);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
On click, an iframe is created, the source URL is concatenated, and the iframe is appended to the DOM of the youtube-embed<\/code> element.<\/p>\n
Once clicked, a CSS classname is added to hide the play button and the newly created iframe is focused.<\/p>\n
Conclusion<\/h2>\n
As written earlier, this is a simple but solid approach to creating a YouTube embed that only embeds itself when the user clicks on it. It is framework agnostic and can be added in any codebase. Saving bandwidth is good for performance, but also for the environment.<\/p>\n
Happy coding!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28313,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,177,371,303],"class_list":["post-28312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-javascript","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nCreate a performant YouTube embed with a native web component<\/title>\n<meta name=\"description\" content=\"In this Media Jam you will learn how to create a native web component that replaces the default YouTube iframe embed.\" \/>\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\/create-a-performant-youtube-embed-with-a-native-web-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a performant YouTube embed with a native web component\" \/>\n<meta property=\"og:description\" content=\"In this Media Jam you will learn how to create a native web component that replaces the default YouTube iframe embed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-18T22:02:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"5000\" \/>\n\t<meta property=\"og:image:height\" content=\"4000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\/create-a-performant-youtube-embed-with-a-native-web-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create a performant YouTube embed with a native web component\",\"datePublished\":\"2021-05-18T22:02:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Javascript\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/\",\"name\":\"Create a performant YouTube embed with a native web component\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA\",\"datePublished\":\"2021-05-18T22:02:40+00:00\",\"description\":\"In this Media Jam you will learn how to create a native web component that replaces the default YouTube iframe embed.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA\",\"width\":5000,\"height\":4000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a performant YouTube embed with a native web component\"}]},{\"@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":"Create a performant YouTube embed with a native web component","description":"In this Media Jam you will learn how to create a native web component that replaces the default YouTube iframe embed.","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\/create-a-performant-youtube-embed-with-a-native-web-component\/","og_locale":"en_US","og_type":"article","og_title":"Create a performant YouTube embed with a native web component","og_description":"In this Media Jam you will learn how to create a native web component that replaces the default YouTube iframe embed.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/","og_site_name":"Cloudinary Blog","article_published_time":"2021-05-18T22:02:40+00:00","og_image":[{"width":5000,"height":4000,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/"},"author":{"name":"","@id":""},"headline":"Create a performant YouTube embed with a native web component","datePublished":"2021-05-18T22:02:40+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA","keywords":["Guest Post","Javascript","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/","name":"Create a performant YouTube embed with a native web component","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA","datePublished":"2021-05-18T22:02:40+00:00","description":"In this Media Jam you will learn how to create a native web component that replaces the default YouTube iframe embed.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA","width":5000,"height":4000},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-performant-youtube-embed-with-a-native-web-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a performant YouTube embed with a native web component"}]},{"@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\/v1681924833\/Web_Assets\/blog\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f\/9057065972a84cd70d04e84e4a934ece6baa51f9-5000x4000-1_2831370e1f.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28312","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=28312"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28312\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28313"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}