Create Custom Video Ads

Deborah Emeni

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.

Prerequisites

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.

1<CodeSandbox title="custom video ads" id="blissful-wozniak-0kel7j" />

Creating custom video ads with text and image in Next.js

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.

Creating the Next.js app

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

1npx 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:

1cd custom-ads && npm run dev

You should see the following displayed to the screen:

Building the application

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:
1import Head from 'next/head'
2 import styles from '..styles/Home.module.css'
3 import { useState } from 'react'
4 import Overlay from './Overlay'
5
6 export default function Home() {
7 let [display, setDisplay] = useState(false)
8 let [imgUrl. setUrl] = useState('')
9 let [adText, setAdText] = useState('')
10
11 // Create Ad
12 const handleClick = () => {
13 if (imgUrl.startsWith('https://') && adText) setDisplay(true);
14 }
15
16 // Hide Ad by clicking on video
17 const hideAd = (e) => {
18 if (display) setDisplay(false);
19 }
20
21 return (
22 <div className={styles.container}>
23 <Head>
24 <title>Create Custom Ad</title>
25 <meta name="decsription" content="Create custom ads using Next.js" />
26 </Head>
27 <main className={styles.main}>
28 <h1 className={styles.title}>Create Custom Ads</h1>
29 <input onChange={(e) => setImgUrl(e.target.value)} value={imgUrl} className={styles.input} placeholder='Insert Img Url' type="text"></input>
30 <input onChange={(e) => setAdText(e.target.value)} value={adText} className={styles.input} placeholder='Insert text' type="text"></input>
31 <button onClick={handleClick} className={styles.button}>Create Ad</button>
32 <div className={styles.content}>
33 <Overlay display={display} imgUrl={imgUrl} adText={adText}/>
34 <video onClick={hideAd} className={styles.video} controls>
35 <source src="https://res.cloudinary.com/dalu46/video/upload/v1650733238/Play_New___Nike_kepz27.mp4"/>
36 </video>
37 </div>
38 </main>
39 <footer className={styles.footer}>
40 <p>
41 <b>Custom Ads 2022</b>
42 </p>
43 </footer>
44 </div>
45 )
46 }

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.

Creating the Ad banner

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

1import styles from '../styles/Overlay.module.css'
2function Overlay ({display, imgUrl, adText}) {
3 return (
4 display &&
5 <div className={styles.overlay}>
6 <img className={styles.overlayImg} src={imgUrl}></img>
7 <p className={styles.overlayText}>{adText}</p>
8 </div>
9 )
10}
11
12export 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:

Conclusion

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.

Resources

You may find the following resources useful.

  • Cloudinary Image transformations
  • Uploading images to Cloudinary

Deborah Emeni

Developer

I'm a Software Developer and Technical Writer with skills in Nodejs, React, and Solidity.