Skip to content

Create Custom Video Ads

Image ads are promotional images conveying information about brands or products to attract interest and engagement and improve sales.

This article discusses using Next.js to create a custom video ad application with dynamic image/text ads layered on the video.

To follow along in this tutorial, ensure that you have the following:

  • Node.js (version 10.13)
  • Basic knowledge of CSS modules and React.js
  • Code Editor

Here’s the link to the completed project on CodeSandbox.

You’ll 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.

In essence, you’ll create a button called “Create Ad” that would display the custom image and text ad over the video player.

Start by initializing your Next.js app by running the following command:

npx create-next-app custom-ads

Once you run this command, it will create your Next.js files in the custom-ads folder.

Start a development server using this terminal command:

cd custom-ads && npm run dev

You should see the following displayed to the screen:

First, you’ll use CSS modules to style the components. Create an Overlay.module.css file in the custom-ads/styles directory.

Next, navigate to the pages folder and do the following:

  • Create another file called Overlay.js
  • Open the index.js file and replace with the following code:
    import Head from 'next/head'
    import styles from '..styles/Home.module.css'
    import { useState } from 'react'
    import Overlay from './Overlay'
    export default function Home() {
      let [display, setDisplay] = useState(false)
      let [imgUrl. setUrl] = useState('')
      let [adText, setAdText] = useState('')
      // Create Ad
      const handleClick = () => {
         if (imgUrl.startsWith('https://') && adText) setDisplay(true);
      // Hide Ad by clicking on video
      const hideAd = (e) => {
         if (display) setDisplay(false);
      return (
        <div className={styles.container}>
             <title>Create Custom Ad</title>
             <meta name="decsription" content="Create custom ads using Next.js" />
          <main className={styles.main}>
             <h1 className={styles.title}>Create Custom Ads</h1>
             <input onChange={(e) => setImgUrl(} value={imgUrl} className={styles.input} placeholder='Insert Img Url' type="text"></input>
             <input onChange={(e) => setAdText(} value={adText} className={styles.input} placeholder='Insert text' type="text"></input>
             <button onClick={handleClick} className={styles.button}>Create Ad</button>
             <div className={styles.content}>
                <Overlay display={display} imgUrl={imgUrl} adText={adText}/>
                <video onClick={hideAd} className={} controls>
                  <source src=""/>
          <footer className={styles.footer}>
                 <b>Custom Ads 2022</b>

From the code block above, you did the following:

  • Imported required dependencies to style, provision state management, and add header information to the component.
  • Created the Home component that houses the entire application. It contains three (3) state variables which are passed dynamically to the Overlay component termed: display, imgURL, and adText.

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.

Also, the Home component contains a main div that consists of the significant elements of your application. They include:

  • An input element that accepts an image URL and binds its value to the imgUrl state variable.
  • A second input field that accepts a text and binds its value to the adText state variable.
  • The Create Ad button displays the Overlay component (ad banner). It calls the handleClick() function that checks if the image URL begins with “https://” and ensures that a user adds a link to the image input field. The function also checks that the second input field isn’t empty, and if all checks pass, it sets the display state variable to t``rue . It causes the ad banner to show up.
  • The native video 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 hideAd() function.

In the Overlay.js file, you’ll add the following code for your ad banner component:

import styles from '../styles/Overlay.module.css'
function Overlay ({display, imgUrl, adText}) {
  return (
    display &&
    <div className={styles.overlay}>
        <img className={styles.overlayImg} src={imgUrl}></img>
        <p className={styles.overlayText}>{adText}</p>

export default Overlay;

From the code block above, you did the following:

  • You imported the required dependency.

  • You created the components that accept the three (3) variables as props passed in from the Home component. The first prop is a boolean that determines the display of the ad banner.

The second and third props 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 Home component.

See an illustration of the application below:

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. Here’s the link to the project hosted on Netlify.

You may find the following resources useful.

  • Cloudinary Image transformations
  • Uploading images to Cloudinary
Back to top

Featured Post