{"id":28512,"date":"2022-04-06T02:44:21","date_gmt":"2022-04-06T02:44:21","guid":{"rendered":"http:\/\/creating-custom-video-ads-in-nextjs"},"modified":"2025-03-02T15:18:22","modified_gmt":"2025-03-02T23:18:22","slug":"creating-custom-video-ads-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/","title":{"rendered":"Creating Custom Video Ads in Next.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Video advertisements are promotional content that plays before, during, or after streaming content. Video ads are currently the biggest name in the online marketplaces. They use movements and sounds to convey messages to users efficiently, leading to more significant and better user engagements.<\/p>\n<p>In this article, we demonstrate how to build custom video ads and add some text with Next.js. These ads show up after a specific time as we stream our content.<\/p>\n<p><a href=\"https:\/\/nextjs.org\/\">Next.js<\/a> is a React-based framework famous for server-side rendering (SSR), and it\u2019s SEO friendly.<\/p>\n<h2>Prerequisites<\/h2>\n<p>The following are required to follow along in this post:<\/p>\n<ul>\n<li>Basic knowledge of CSS, JavaScript, and React.<\/li>\n<li>An understanding of Next.js.<\/li>\n<li>Node.js installed on your computer.<\/li>\n<\/ul>\n<h2>Sandbox<\/h2>\n<p>We completed this project on <a href=\"https:\/\/codesandbox.io\/s\/inspiring-sunset-ngpqsl\">CodeSandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/inspiring-sunset-ngpqsl?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=\"Creating custom video ads in Next.js\"\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 \"><p>Check out the complete source code on <a href=\"https:\/\/github.com\/Kizmelvin\/Next.js-video-ads\">GitHub<\/a>.<\/p>\n<h2>Setting up Next.js application<\/h2>\n<p>First, we will run the following command in our terminal and follow the prompts.<\/p>\n<pre><code>npx create-next-app video-ads\n<\/code><\/pre>\n<p>This creates a Next.js application inside a folder called video-ads. Navigate inside the folder and start the application with the following commands:<\/p>\n<pre><code>cd next-carousels # to navigate into the project directory\nnpm run dev # to run the dev server\n<\/code><\/pre>\n<p>The app will be live in our browser at <code>http:\/\/localhost:3000<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1648760160\/e-622f7669a2248400693fd10e\/dtgaduynswywczpzkxuh.png\" alt=\"next-welcome\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1136\" height=\"841\"\/><\/p>\n<h2>Creating a custom video<\/h2>\n<p>In the pages directory, let\u2019s clean up and update the <code>index.js<\/code> file with the following codes:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-comment\">\/\/ pages\/index.js<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">const<\/span> &#91;ads, setAds] = useState(<span class=\"hljs-literal\">false<\/span>);\n      <span class=\"hljs-keyword\">const<\/span> playAds = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n          setAds(<span class=\"hljs-literal\">true<\/span>);\n        }, <span class=\"hljs-number\">3000<\/span>);\n      };\n      <span class=\"hljs-keyword\">const<\/span> endAds = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        setAds(<span class=\"hljs-literal\">false<\/span>);\n      };\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.container}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Video Ads Project <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.main}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">video<\/span> <span class=\"hljs-attr\">controls<\/span> <span class=\"hljs-attr\">onPlay<\/span>=<span class=\"hljs-string\">{playAds}<\/span> <span class=\"hljs-attr\">onEnded<\/span>=<span class=\"hljs-string\">{endAds}<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/video\/upload\/v1647620339\/Social_Media_-_1360_dkrwhg.mp4\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">video<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, we:<\/p>\n<ol>\n<li>created a state variable, <code>ads<\/code>, and set its initial value to <code>false<\/code>,<\/li>\n<li>created a playAds function, which plays our video ad and ends it after a certain period of time,<\/li>\n<li>created an <code>endAds<\/code> function, which sets <code>ads<\/code> back to false, and<\/li>\n<li>created our custom video and passed the functions.<\/li>\n<\/ol>\n<p>The video source is a video we already host on <a href=\"https:\/\/cloudinary.com\/\">cloudinary<\/a>. Learn how to upload a video asset on cloudinary <a href=\"https:\/\/cloudinary.com\/documentation\/media_library_upload_tutorial\">here<\/a>.<\/p>\n<p>If we go to the browser, we will see a video player with a video in it.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1648761276\/e-622f7669a2248400693fd10e\/x7p1jol6nwnbw4a59xzk.png\" alt=\"ads-second\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1136\" height=\"841\"\/><\/p>\n<h2>Creating the video ads<\/h2>\n<p>In the root directory of our project, let\u2019s create a folder called adsOverlay, and inside it, create a file <code>Overlay.js<\/code> with the following codes:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-comment\">\/\/ adsOverlay\/Overlay.js<\/span>\n    <span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/Overlay.module.css\"<\/span>;\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Overlay<\/span>(<span class=\"hljs-params\">{ setAds, endAds }<\/span>) <\/span>{\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.overlay}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">video<\/span> <span class=\"hljs-attr\">controls<\/span>=<span class=\"hljs-string\">{false}<\/span> <span class=\"hljs-attr\">autoPlay<\/span> <span class=\"hljs-attr\">muted<\/span> <span class=\"hljs-attr\">onEnded<\/span>=<span class=\"hljs-string\">{endAds}<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">100<\/span>%\"}&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/video\/upload\/v1647619418\/ads_zt8s6i.mov\"<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">video<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.btn}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Make up to 20% profit when you invest with us<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/hackmamba.io\/\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">_blank<\/span>\"} <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"noreferrer\"<\/span>&gt;<\/span>\n                Get Started\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> setAds(false)}&gt;X<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    }\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Overlay;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the above code, we:<\/p>\n<ol>\n<li>Imported styles from <code>&quot;.\/Overlay.module.css&quot;<\/code>.<\/li>\n<li>Destructured <code>setAds<\/code> and <code>endAds<\/code> and implemented our video ads.<\/li>\n<\/ol>\n<p>Whenever we click the \u2018X\u2019 button, <code>setAds()<\/code> updates our <code>ads<\/code> state.<\/p>\n<p>Next, we\u2019ll import the <code>Overlay.js<\/code> component and render it inside the <code>index.js<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-comment\">\/\/pages\/index.js<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> Overlay <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/adsOverlay\/Overlay\"<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">const<\/span> &#91;ads, setAds] = useState(<span class=\"hljs-literal\">false<\/span>);\n      <span class=\"hljs-keyword\">const<\/span> playAds = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">let<\/span> timerId = setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n          setAds(<span class=\"hljs-literal\">true<\/span>);\n          timerId = setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n            setAds(<span class=\"hljs-literal\">false<\/span>);\n          }, <span class=\"hljs-number\">10000<\/span>);\n        }, <span class=\"hljs-number\">3000<\/span>);\n      };\n      <span class=\"hljs-keyword\">const<\/span> endAds = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        setAds(<span class=\"hljs-literal\">false<\/span>);\n      };\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.container}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Video Ads Project<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.main}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">video<\/span> <span class=\"hljs-attr\">controls<\/span> <span class=\"hljs-attr\">onPlay<\/span>=<span class=\"hljs-string\">{playAds}<\/span> <span class=\"hljs-attr\">onEnded<\/span>=<span class=\"hljs-string\">{endAds}<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">100<\/span>%\"}&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/video\/upload\/v1647620339\/Social_Media_-_1360_dkrwhg.mp4\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">video<\/span>&gt;<\/span>\n            {ads &amp;&amp; <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Overlay<\/span> <span class=\"hljs-attr\">setAds<\/span>=<span class=\"hljs-string\">{setAds}<\/span> <span class=\"hljs-attr\">endAds<\/span>=<span class=\"hljs-string\">{endAds}<\/span> \/&gt;<\/span>}\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code snippet above:<\/p>\n<ol>\n<li>We used conditional rendering to render the <code>Overlay.js<\/code> component.<\/li>\n<li>We also nested <code>setTimeout<\/code> functions inside the <code>playAds()<\/code> to play and remove the video ads after a certain time.<\/li>\n<\/ol>\n<p>We would have a functional video player and a video in the browser.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1648762906\/e-622f7669a2248400693fd10e\/gykkspdr2y4kskradlu9.gif\" alt=\"vid-ads\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"434\" height=\"324\"\/><\/p>\n<p>Three seconds after a user starts streaming, the video ads play, and they end after ten seconds. The \u2018X\u2019 button closes the video ads when users click on it.<\/p>\n<h2>Conclusion<\/h2>\n<p>This post discussed implementing custom video ads in a Next.js application.<\/p>\n<h2>Resources<\/h2>\n<p>These resources could be helpful:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/github.com\/css-modules\/css-modules\">CSS Modules<\/a>.<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/media_library_upload_tutorial\">Media Library Upload<\/a>.<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28513,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[389,134,177,212,371,303],"class_list":["post-28512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-audio","tag-guest-post","tag-javascript","tag-next-js","tag-under-review","tag-video"],"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>Creating Custom Video Ads in Next.js<\/title>\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\/creating-custom-video-ads-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Custom Video Ads in Next.js\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-06T02:44:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-02T23:18:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1272\" \/>\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\/creating-custom-video-ads-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Creating Custom Video Ads in Next.js\",\"datePublished\":\"2022-04-06T02:44:21+00:00\",\"dateModified\":\"2025-03-02T23:18:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e.jpg?_i=AA\",\"keywords\":[\"Audio\",\"Guest Post\",\"Javascript\",\"Next.js\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/\",\"name\":\"Creating Custom Video Ads in Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e.jpg?_i=AA\",\"datePublished\":\"2022-04-06T02:44:21+00:00\",\"dateModified\":\"2025-03-02T23:18:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e.jpg?_i=AA\",\"width\":1920,\"height\":1272},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Custom Video Ads in Next.js\"}]},{\"@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":"Creating Custom Video Ads 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\/creating-custom-video-ads-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"Creating Custom Video Ads in Next.js","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-06T02:44:21+00:00","article_modified_time":"2025-03-02T23:18:22+00:00","og_image":[{"width":1920,"height":1272,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e-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\/creating-custom-video-ads-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/"},"author":{"name":"","@id":""},"headline":"Creating Custom Video Ads in Next.js","datePublished":"2022-04-06T02:44:21+00:00","dateModified":"2025-03-02T23:18:22+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e.jpg?_i=AA","keywords":["Audio","Guest Post","Javascript","Next.js","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/","name":"Creating Custom Video Ads in Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e.jpg?_i=AA","datePublished":"2022-04-06T02:44:21+00:00","dateModified":"2025-03-02T23:18:22+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e.jpg?_i=AA","width":1920,"height":1272},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-video-ads-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Custom Video Ads in Next.js"}]},{"@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\/v1681924312\/Web_Assets\/blog\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e\/6422df95148b344ed344c9dea1bcf7e132109dbd-1920x1272-1_285138a33e.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28512","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=28512"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28512\/revisions"}],"predecessor-version":[{"id":37101,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28512\/revisions\/37101"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28513"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}