{"id":27971,"date":"2022-05-05T08:35:19","date_gmt":"2022-05-05T08:35:19","guid":{"rendered":"http:\/\/create-custom-video-ads-with-text-and-image-in-next.js."},"modified":"2022-05-05T08:35:19","modified_gmt":"2022-05-05T08:35:19","slug":"create-custom-video-ads-with-text-and-image-in-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/","title":{"rendered":"Create Custom Video Ads"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Image ads are promotional images conveying information about brands or products to attract interest and engagement and improve sales.<\/p>\n<p>This article discusses using Next.js to create a custom video ad application with dynamic image\/text ads layered on the video.<\/p>\n<h2>Prerequisites<\/h2>\n<p>To follow along in this tutorial, ensure that you have the following:<\/p>\n<ul>\n<li>Node.js (version 10.13)<\/li>\n<li>Basic knowledge of CSS modules and React.js<\/li>\n<li>Code Editor<\/li>\n<\/ul>\n<p>Here\u2019s the <a href=\"https:\/\/codesandbox.io\/s\/blissful-wozniak-0kel7j\">link<\/a> to the completed project on CodeSandbox.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/blissful-wozniak-0kel7j?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"custom video ads\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><h2>Creating custom video ads with text and image in Next.js<\/h2>\n<p>You\u2019ll start by creating an application that will include two input fields with a button. The first input will accept an image url hosted on Cloudinary, and the second input will take a text. The text and image go on the ad.<\/p>\n<p>In essence, you\u2019ll create a button called \u201cCreate Ad\u201d that would display the custom image and text ad over the video player.<\/p>\n<h3>Creating the Next.js app<\/h3>\n<p>Start by initializing your Next.js app by running the following command:<\/p>\n<pre><code>npx create-next-app custom-ads\n<\/code><\/pre>\n<p>Once you run this command, it will create your Next.js files in the <code>custom-ads<\/code> folder.<\/p>\n<p>Start a development server using this terminal command:<\/p>\n<pre><code>cd custom-ads &amp;&amp; npm run dev\n<\/code><\/pre>\n<p>You should see the following displayed to the screen:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_B805A57EF1C34DD32FF6EAA31C4B47A6AEDD681DFB6350F4B3E5B308377CFCFA_1650832321836_deb1.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1600\" height=\"1000\"\/><\/p>\n<p><img decoding=\"async\" src=\"\/static\/img\/pixel.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\" \/><\/p>\n<h3>Building the application<\/h3>\n<p>First, you\u2019ll use CSS modules to style the components. Create an <code>Overlay.module.css<\/code> file in the custom-ads\/styles directory.<\/p>\n<p>Next, navigate to the <code>pages<\/code> folder and do the following:<\/p>\n<ul>\n<li>Create another file called <code>Overlay.js<\/code>\n<\/li>\n<li>Open the <code>index.js<\/code> file and replace with the following code:<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\"><code>    import Head from 'next\/head'\n    import styles from '..styles\/Home.module.css'\n    import { useState } from 'react'\n    import Overlay from '.\/Overlay'\n    \n    export default function Home() {\n      let [display, setDisplay] = useState(false)\n      let [imgUrl. setUrl] = useState('')\n      let [adText, setAdText] = useState('')\n    \n      \/\/ Create Ad\n      const handleClick = () =&gt; {\n         if (imgUrl.startsWith('https:\/\/') &amp;&amp; adText) setDisplay(true);\n      } \n      \n      \/\/ Hide Ad by clicking on video\n      const hideAd = (e) =&gt; {\n         if (display) setDisplay(false);\n      }\n    \n      return (\n        &lt;div className={styles.container}&gt;\n          &lt;Head&gt;\n             &lt;title&gt;Create Custom Ad&lt;\/title&gt;\n             &lt;meta name=&quot;decsription&quot; content=&quot;Create custom ads using Next.js&quot; \/&gt;\n          &lt;\/Head&gt;\n          &lt;main className={styles.main}&gt;\n             &lt;h1 className={styles.title}&gt;Create Custom Ads&lt;\/h1&gt;\n             &lt;input onChange={(e) =&gt; setImgUrl(e.target.value)} value={imgUrl} className={styles.input} placeholder='Insert Img Url' type=&quot;text&quot;&gt;&lt;\/input&gt;\n             &lt;input onChange={(e) =&gt; setAdText(e.target.value)} value={adText} className={styles.input} placeholder='Insert text' type=&quot;text&quot;&gt;&lt;\/input&gt;\n             &lt;button onClick={handleClick} className={styles.button}&gt;Create Ad&lt;\/button&gt;\n             &lt;div className={styles.content}&gt;\n                &lt;Overlay display={display} imgUrl={imgUrl} adText={adText}\/&gt;\n                &lt;video onClick={hideAd} className={styles.video} controls&gt;\n                  &lt;source src=&quot;https:\/\/res.cloudinary.com\/dalu46\/video\/upload\/v1650733238\/Play_New___Nike_kepz27.mp4&quot;\/&gt;\n    &lt;\/video&gt;      \n    &lt;\/div&gt;\n          &lt;\/main&gt;\n          &lt;footer className={styles.footer}&gt;\n               &lt;p&gt;\n                 &lt;b&gt;Custom Ads 2022&lt;\/b&gt;\n               &lt;\/p&gt;\n          &lt;\/footer&gt;\n        &lt;\/div&gt;\n      )\n    }\n<\/code><\/pre>\n<p>From the code block above, you did the following:<\/p>\n<ul>\n<li>Imported required dependencies to style, provision state management, and add header information to the component.<\/li>\n<li>Created the <code>Home<\/code> component that houses the entire application. It contains three (3) state variables which are passed dynamically to the <code>Overlay<\/code> component termed: <code>display,<\/code> <code>imgURL,<\/code> and <code>adText.<\/code>\n<\/li>\n<\/ul>\n<p>These three (3) state variables carry out the decision to display the ad banner or not and what image and text to use in the ad banner.<\/p>\n<p>Also, the <code>Home<\/code> component contains a <code>main<\/code> div that consists of the significant elements of your application. They include:<\/p>\n<ul>\n<li>An input element that accepts an image URL and binds its value to the <code>imgUrl<\/code> state variable.<\/li>\n<li>A second input field that accepts a text and binds its value to the <code>adText<\/code> state variable.<\/li>\n<li>The Create Ad button displays the <code>Overlay<\/code> component (ad banner). It calls the <code>handleClick()<\/code> function that checks if the image URL begins with \u201chttps:\/\/\u201d and ensures that a user adds a link to the image input field. The function also checks that the second input field isn\u2019t empty, and if all checks pass, it sets the  <code>display<\/code> state variable to <code>t``rue<\/code> . It causes the ad banner to show up.<\/li>\n<li>The native <code>video<\/code> element renders the default video content over which the ad banner will display. When clicked, the video player can hide the ad banner (if the ad banner is visible). It does this by calling the <code>hideAd()<\/code> function.<\/li>\n<\/ul>\n<h3>Creating the Ad banner<\/h3>\n<p>In the <code>Overlay.js<\/code> file, you\u2019ll add the following code for your ad banner component:<\/p>\n<pre><code>import styles from '..\/styles\/Overlay.module.css'\nfunction Overlay ({display, imgUrl, adText}) {\n  return (\n    display &amp;&amp;\n    &lt;div className={styles.overlay}&gt;\n        &lt;img className={styles.overlayImg} src={imgUrl}&gt;&lt;\/img&gt;\n        &lt;p className={styles.overlayText}&gt;{adText}&lt;\/p&gt;\n    &lt;\/div&gt;\n  )\n}\n\nexport default Overlay;\n<\/code><\/pre>\n<p>From the code block above, you did the following:<\/p>\n<ul>\n<li>\n<p>You imported the required dependency.<\/p>\n<\/li>\n<li>\n<p>You created the components that accept the three (3) variables as <code>props<\/code> passed in from the <code>Home<\/code> component. The first <code>prop<\/code> is a boolean that determines the display of the ad banner.<\/p>\n<\/li>\n<\/ul>\n<p>The second and third <code>props<\/code> are the values of the image URL and custom ad text, which would render side by side on the ad banner. This component which exports, is then imported and used by the <code>Home<\/code> component.<\/p>\n<p>See an illustration of the application below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media1.giphy.com\/media\/tb7YtaWdbpvvgBPSVr\/giphy.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"480\" height=\"300\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this article you built a custom video ad creator having some text and an image. Try uploading a new image on Cloudinary, possibly with image transformations.\nHere\u2019s the link to the project hosted on Netlify.<\/p>\n<h2>Resources<\/h2>\n<p>You may find the following resources useful.<\/p>\n<ul>\n<li>Cloudinary Image transformations<\/li>\n<li>Uploading images to Cloudinary<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27972,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,212,371],"class_list":["post-27971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-next-js","tag-under-review"],"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>Create Custom Video Ads<\/title>\n<meta name=\"description\" content=\"An article about creating custom video ads with text and images in next.js.\" \/>\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-custom-video-ads-with-text-and-image-in-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Custom Video Ads\" \/>\n<meta property=\"og:description\" content=\"An article about creating custom video ads with text and images in next.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-05T08:35:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\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-custom-video-ads-with-text-and-image-in-next-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create Custom Video Ads\",\"datePublished\":\"2022-05-05T08:35:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Next.js\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/\",\"name\":\"Create Custom Video Ads\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.jpg?_i=AA\",\"datePublished\":\"2022-05-05T08:35:19+00:00\",\"description\":\"An article about creating custom video ads with text and images in next.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.jpg?_i=AA\",\"width\":500,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Custom Video Ads\"}]},{\"@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 Custom Video Ads","description":"An article about creating custom video ads with text and images in next.js.","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-custom-video-ads-with-text-and-image-in-next-js\/","og_locale":"en_US","og_type":"article","og_title":"Create Custom Video Ads","og_description":"An article about creating custom video ads with text and images in next.js.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-05-05T08:35:19+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.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-custom-video-ads-with-text-and-image-in-next-js\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/"},"author":{"name":"","@id":""},"headline":"Create Custom Video Ads","datePublished":"2022-05-05T08:35:19+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.jpg?_i=AA","keywords":["Guest Post","Next.js","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/","name":"Create Custom Video Ads","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.jpg?_i=AA","datePublished":"2022-05-05T08:35:19+00:00","description":"An article about creating custom video ads with text and images in next.js.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.jpg?_i=AA","width":500,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-with-text-and-image-in-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Custom Video Ads"}]},{"@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\/v1681939219\/Web_Assets\/blog\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a\/816d2a9379637276d7f8622e9f4fd99e544ddfa9-500x500-1_27972e561a.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27971","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=27971"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27971\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27972"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}