{"id":22314,"date":"2021-03-29T17:27:14","date_gmt":"2021-03-29T17:27:14","guid":{"rendered":"http:\/\/building_display_ads_with_transparent_video"},"modified":"2024-06-03T13:19:59","modified_gmt":"2024-06-03T20:19:59","slug":"building_display_ads_with_transparent_video","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video","title":{"rendered":"Building Display Ads With Transparent Video"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Billions of views on the Internet every day drive one of the biggest industries on the planet: advertising. The sheer size of that market and the competitive nature of vying for consumer attention results in a constant need for innovation. Readers are jaded, and display ads are blind spots.<\/p>\n<p>To break through this veil of antipathy, advertisers must impress, entertain, and delight prospective customers. Reality is, click-through rates for static banners are continuing to drop, and even animated images or script-based animations are limited in effectiveness. Motion captures readers\u2019 eye, but a story holds the audience, hence why more advertisers are moving toward video-based advertising.<\/p>\n<p>However, if placed outside the main field of view, video and <a href=\"https:\/\/cloudinary.com\/video_api\">video APIs<\/a> are still subject to the \u201cblind spot\u201d issue. Overlaying a video that contains transparency enables the video and, therefore, the message to become part of the content.<\/p>\n<p>Placing a video overlay on top of your site\u2019s viewport, changing content, or helping visitors navigate the site promotes understanding of your product, encouraging engagement by potential customers. Transparent video feels like it\u2019s part of your site, not just embedded there. Since all other webpage elements are visible, you can, with regular web-development expertise, build a captivating experience behind and around videos.<\/p>\n<p>With the power of today\u2019s 5G bandwidth, streaming video on websites is no longer a challenge, so you need not limit yourself to the old-fashioned, text-based ways of implementing interactions. With Cloudinary and a little JavaScript, creating compelling video ads is now easier\u2014and more fun\u2014than you might think.<\/p>\n<h2>Preparing the Video<\/h2>\n<p>Transparent <a href=\"https:\/\/cloudinary.com\/glossary\/avod\">video ads<\/a> originate from videos with a transparent channel, such as WebM videos, and a transparent background set. You can purchase videos in that format online or create your own green-screen videos and remove the background. That\u2019s what we did for this demo: we downloaded a video <a href=\"https:\/\/www.techsmith.com\/tutorial-camtasia-how-to-remove-a-color.html\">from Camtasia<\/a> and then used that tool to eliminate the background. The video is available for free for those who want to process videos with Camtasia.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Cloudinary is working on an experimental feature to \u201cautomagically\u201d remove video backgrounds.<\/p><\/div>\n<p>Once you have a WebM-formatted video with a transparent background, upload the video to Cloudinary:<\/p>\n<ol>\n<li>Log in to Cloudinary and, on the Dashboard, click the <strong>Media Library<\/strong> icon (second left at the top).<\/li>\n<li>Click <strong>Upload<\/strong> in the top-right corner to specify the video you wish to upload. Either drag and drop it on to the portal or select it after navigating to the folder that houses the video. Once upload succeeds, Cloudinary displays it in your Media Library:<\/li>\n<li>Copy the video URL and embed it on your website with the built-in HTML5 <code>&lt;video\/&gt;<\/code> element. Before doing that, feel free to apply more transformations to the video, such as resizing, cropping, and adding a background.<\/li>\n<\/ol>\n<p>Your video is now available on your site. Read on to learn how to stream video content to visitors.<\/p>\n<h2>Embedding the Video on a Website<\/h2>\n<p>Cloudinary offers an SDK that delivers transparent videos directly within HTML content. With that JavaScript SDK, you can deliver content across all browsers. The rest of this section describes the controls for delivering transparent video to all browsers.<\/p>\n<p>Normally, you would add video to webpages with the HTML5 <code>&lt;video&gt;<\/code> element or through the Cloudinary Video Player. However, transparent video is an exception. Native HTML5 and the Cloudinary Video Player can handle transparent video everywhere <strong>except<\/strong> Safari on iOS and pre-Big Sur MacOS versions. That\u2019s a problem given the ubiquity of Macs and iPhones.<\/p>\n<p>Fortunately, the Cloudinary <a href=\"https:\/\/cloudinary.com\/documentation\/javascript_integration\">JavaScript SDK<\/a> can help with its <code>injectTransparentVideoElement<\/code> method, which can <a href=\"https:\/\/cloudinary.com\/documentation\/video_manipulation_and_delivery#deliver_transparent_videos\">add transparent videos<\/a> that work everywhere. Here\u2019s an example of the code on a simple webpage:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;html lang=&quot;en&quot;&gt;\n   \t&lt;head&gt;\n\t   &lt;title&gt;Transparent Video&lt;\/title&gt;\n\t   &lt;style&gt;\n    \t \t#video-overlay {\n        \t    position: absolute;\n   \t  \t   \t\ttop: 90;\n   \t         \tleft: 65;\n                width: 900px;\n    \t \t}\n\t   &lt;\/style&gt;\n\t   &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css&quot;&gt;\n\t   &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap-theme.min.css&quot;&gt;\n\t   &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-1.12.4.min.js&quot;&gt;&lt;\/script&gt;\n\t   &lt;script src=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.4.1\/js\/bootstrap.min.js&quot;&gt;&lt;\/script&gt;\n          &lt;script src=&quot;https:\/\/unpkg.com\/cloudinary-core@latest\/cloudinary-core-shrinkwrap.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\n   \t&lt;\/head&gt;\n   \t&lt;body&gt;\n\t   &lt;div class=&quot;container&quot;&gt;\n    \t \t&lt;h1&gt;Video overlays&lt;\/h1&gt;\n    \t \t&lt;p&gt;Video overlays are a great way to engage users without interfering with the content on the website.&lt;\/p&gt;\n\t\t\t&lt;input type=&quot;submit&quot; value=&quot;Click me!&quot; class=&quot;overlay-control&quot; style=&quot;z-index: 6; position: relative;&quot; \/&gt;\n    \t \t&lt;p&gt;Hi, here is some text behind the video...&lt;\/p&gt;\n    \t \t&lt;p class=&quot;mt-100&quot;&gt;Here is more text content.&lt;\/p&gt;\n    \t \t&lt;div id=&quot;video-overlay&quot; style=&quot;z-index: 5;&quot;&gt;&lt;\/video&gt;\n\t   &lt;\/div&gt;\n          &lt;script&gt;\n\t\t\t  $(function() {\n\t\t\t\t$(&quot;.overlay-control&quot;).click(function() {\n\t\t\t\t\tvar cld = cloudinary.Cloudinary.new({ cloud_name: 'afzaalahmadzeeshan' });\n\t\t\t\t\tcld.injectTransparentVideoElement(document.getElementById(&quot;video-overlay&quot;), 'v1610035527\/samples\/elephants.mp4', {\n\t\t\t\t\t\tloop: true,\n\t\t\t\t\t\tplaysinline: true,\n\t\t\t\t\t\twidth: 600,\n\t\t\t\t\t}).catch(error =&gt; {\n\t\t\t\t\t\tconsole.log(error);\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t  });\n          &lt;\/script&gt;\n   \t&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>As expected, you can see the HTML elements behind the video because of its transparent parts.<\/p>\n<p>Furthermore, you can create fun experiences with transparent video, for example, set up the content with JavaScript to play or pause on a user interaction, hence opening up more possibilities for content and advertising. A transparent-display ad can become part of the content the audience was looking at, intriguing them and capturing their attention. On your website, transparent video can also entice audience engagement with content, directing them to navigate to product pages or interact with demos.<\/p>\n<p>Applications abound for transparent video in other industries. For instance, those in academia can display videos that require students to perform certain tasks on the website before the instructor proceeds with the course material.<\/p>\n<p>Keep in mind that you can further customize the above script to transform videos. Plus, it\u2019d be prudent to add a fallback value that the script can render in case the browser does not support all the features required to play the video.<\/p>\n<p>For details on all those options, see Cloudinary\u2019s documentation on its <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\">Video Player<\/a> and on <a href=\"https:\/\/cloudinary.com\/documentation\/video_manipulation_and_delivery#embedding_videos_in_web_pages\">video transformations<\/a>.<\/p>\n<h2>Taking the Next Steps<\/h2>\n<p>Beside describing the benefits of embellishing web advertisements with compelling, transparent video content, this article also explains why interactive content is useful and why old, static ads are less so. You\u2019ve also learned how to collect, purchase, or prepare your own interactive video for display on your site, and then embed that video with Cloudinary and JavaScript.<\/p>\n<p>Cloudinary\u2019s upcoming video-editing feature will build on the existing technologies, enabling you to create riveting, interactive videos with artificial intelligence (AI). You can then easily remove video backgrounds and create transparent overlays for embedding in your website, further promoting user engagement.<\/p>\n<p>For more insight, check out the Google Chrome Developer\u2019s post on <a href=\"https:\/\/developers.google.com\/web\/updates\/2013\/07\/Alpha-transparency-in-Chrome-video\">alpha transparency in videos<\/a> and the Google Web Team\u2019s article on <a href=\"https:\/\/developers.google.com\/web\/updates\/2017\/09\/autoplay-policy-changes\">autoplay policy changes<\/a>.<\/p>\n<p>Are you ready to boost engagement with transparent video ads? Start with signing up for a <a href=\"https:\/\/cloudinary.com\/users\/register_free\">free Cloudinary account<\/a> with enough <a href=\"https:\/\/cloudinary.com\/pricing\">credits<\/a> to create your first sleek ad.<\/p>\n<h2>About the Author<\/h2>\n<p>Afzaal Ahmad Zeeshan, who hails from the Netherlands, is a developer advocate at Adyen with a preference for .NET Core and Node.js for everyday software programming. As an expert on cloud, mobile, and APIs, Afzaal is adept with the Azure platform and enjoys building cross-platform libraries and software with .NET Core. He\u2019s also an author with Pluralsight with a focus on producing courses on mobile development and programming languages.<\/p>\n<p>Additionally, Afzaal is an Alibaba Cloud MVP. He\u2019s been named Microsoft MVP twice for community leadership in software development, CodeProject MVP six times for technical writing and mentoring, and C# Corner MVP four times in the same field. Beyond that, Afzaal is an active open-source contributor (user name afzaal-ahmad-zeeshan) on GitHub and GitLab.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22315,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,305,311,304],"class_list":["post-22314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-video-api","tag-video-transcoding","tag-video-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build Web Ads With Transparent Video to Attract User Engagement<\/title>\n<meta name=\"description\" content=\"Compelling web ads with transparent video promise to garner more user engagement. Learn how to build them with a Cloudinary SDK and JavaScript.\" \/>\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\/building_display_ads_with_transparent_video\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Display Ads With Transparent Video\" \/>\n<meta property=\"og:description\" content=\"Compelling web ads with transparent video promise to garner more user engagement. Learn how to build them with a Cloudinary SDK and JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-29T17:27:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-03T20:19:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\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\/building_display_ads_with_transparent_video#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Building Display Ads With Transparent Video\",\"datePublished\":\"2021-03-29T17:27:14+00:00\",\"dateModified\":\"2024-06-03T20:19:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Video API\",\"Video Transcoding\",\"Video Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video\",\"url\":\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video\",\"name\":\"Build Web Ads With Transparent Video to Attract User Engagement\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a.png?_i=AA\",\"datePublished\":\"2021-03-29T17:27:14+00:00\",\"dateModified\":\"2024-06-03T20:19:59+00:00\",\"description\":\"Compelling web ads with transparent video promise to garner more user engagement. Learn how to build them with a Cloudinary SDK and JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building Display Ads With Transparent Video\"}]},{\"@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":"Build Web Ads With Transparent Video to Attract User Engagement","description":"Compelling web ads with transparent video promise to garner more user engagement. Learn how to build them with a Cloudinary SDK and JavaScript.","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\/building_display_ads_with_transparent_video","og_locale":"en_US","og_type":"article","og_title":"Building Display Ads With Transparent Video","og_description":"Compelling web ads with transparent video promise to garner more user engagement. Learn how to build them with a Cloudinary SDK and JavaScript.","og_url":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video","og_site_name":"Cloudinary Blog","article_published_time":"2021-03-29T17:27:14+00:00","article_modified_time":"2024-06-03T20:19:59+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video"},"author":{"name":"","@id":""},"headline":"Building Display Ads With Transparent Video","datePublished":"2021-03-29T17:27:14+00:00","dateModified":"2024-06-03T20:19:59+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a.png?_i=AA","keywords":["Asset Management","Video API","Video Transcoding","Video Transformation"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video","url":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video","name":"Build Web Ads With Transparent Video to Attract User Engagement","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a.png?_i=AA","datePublished":"2021-03-29T17:27:14+00:00","dateModified":"2024-06-03T20:19:59+00:00","description":"Compelling web ads with transparent video promise to garner more user engagement. Learn how to build them with a Cloudinary SDK and JavaScript.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/building_display_ads_with_transparent_video#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building Display Ads With Transparent Video"}]},{"@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\/v1649722732\/Web_Assets\/blog\/Transp-video-display-ad_223151309a\/Transp-video-display-ad_223151309a.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22314","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=22314"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22314\/revisions"}],"predecessor-version":[{"id":34334,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22314\/revisions\/34334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22315"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}