Creating Custom Video Ads in Next.js

Chidi Eze

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.

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.

Next.js is a React-based framework famous for server-side rendering (SSR), and it's SEO friendly.

Prerequisites

The following are required to follow along in this post:

  • Basic knowledge of CSS, JavaScript, and React.
  • An understanding of Next.js.
  • Node.js installed on your computer.

Sandbox

We completed this project on CodeSandbox. Fork and run it to quickly get started.

Check out the complete source code on GitHub.

Setting up Next.js application

First, we will run the following command in our terminal and follow the prompts.

1npx create-next-app video-ads

This creates a Next.js application inside a folder called video-ads. Navigate inside the folder and start the application with the following commands:

1cd next-carousels # to navigate into the project directory
2npm run dev # to run the dev server

The app will be live in our browser at http://localhost:3000.

Creating a custom video

In the pages directory, let's clean up and update the index.js file with the following codes:

1// pages/index.js
2 import { useState } from "react";
3 import Head from "next/head";
4 import styles from "../styles/Home.module.css";
5 export default function Home() {
6 const [ads, setAds] = useState(false);
7 const playAds = () => {
8 setTimeout(() => {
9 setAds(true);
10 }, 3000);
11 };
12 const endAds = () => {
13 setAds(false);
14 };
15 return (
16 <div className={styles.container}>
17 <Head>
18 <title>Video Ads Project </title>
19 </Head>
20 <main className={styles.main}>
21 <video controls onPlay={playAds} onEnded={endAds}>
22 <source src="https://res.cloudinary.com/kizmelvin/video/upload/v1647620339/Social_Media_-_1360_dkrwhg.mp4" />
23 </video>
24 </main>
25 </div>
26 );
27 }

In the code above, we:

  1. created a state variable, ads, and set its initial value to false,
  2. created a playAds function, which plays our video ad and ends it after a certain period of time,
  3. created an endAds function, which sets ads back to false, and
  4. created our custom video and passed the functions.

The video source is a video we already host on cloudinary. Learn how to upload a video asset on cloudinary here.

If we go to the browser, we will see a video player with a video in it.

Creating the video ads

In the root directory of our project, let's create a folder called adsOverlay, and inside it, create a file Overlay.js with the following codes:

1// adsOverlay/Overlay.js
2 import styles from "./Overlay.module.css";
3 function Overlay({ setAds, endAds }) {
4 return (
5 <div className={styles.overlay}>
6 <video controls={false} autoPlay muted onEnded={endAds} width={"100%"}>
7 <source src="https://res.cloudinary.com/kizmelvin/video/upload/v1647619418/ads_zt8s6i.mov" />
8 </video>
9 <div className={styles.btn}>
10 <div>
11 <p>Make up to 20% profit when you invest with us</p>
12 <a href="https://hackmamba.io/" target={"_blank"} rel="noreferrer">
13 Get Started
14 </a>
15 </div>
16 <div>
17 <button onClick={() => setAds(false)}>X</button>
18 </div>
19 </div>
20 </div>
21 );
22 }
23 export default Overlay;

In the above code, we:

  1. Imported styles from "./Overlay.module.css".
  2. Destructured setAds and endAds and implemented our video ads.

Whenever we click the 'X' button, setAds() updates our ads state.

Next, we'll import the Overlay.js component and render it inside the index.js file.

1//pages/index.js
2 import { useState } from "react";
3 import Head from "next/head";
4 import styles from "../styles/Home.module.css";
5 import Overlay from "../adsOverlay/Overlay";
6 export default function Home() {
7 const [ads, setAds] = useState(false);
8 const playAds = () => {
9 let timerId = setTimeout(() => {
10 setAds(true);
11 timerId = setTimeout(() => {
12 setAds(false);
13 }, 10000);
14 }, 3000);
15 };
16 const endAds = () => {
17 setAds(false);
18 };
19 return (
20 <div className={styles.container}>
21 <Head>
22 <title>Video Ads Project</title>
23 </Head>
24 <main className={styles.main}>
25 <video controls onPlay={playAds} onEnded={endAds} width={"100%"}>
26 <source src="https://res.cloudinary.com/kizmelvin/video/upload/v1647620339/Social_Media_-_1360_dkrwhg.mp4" />
27 </video>
28 {ads && <Overlay setAds={setAds} endAds={endAds} />}
29 </main>
30 </div>
31 );
32 }

In the code snippet above:

  1. We used conditional rendering to render the Overlay.js component.
  2. We also nested setTimeout functions inside the playAds() to play and remove the video ads after a certain time.

We would have a functional video player and a video in the browser.

Three seconds after a user starts streaming, the video ads play, and they end after ten seconds. The 'X' button closes the video ads when users click on it.

Conclusion

This post discussed implementing custom video ads in a Next.js application.

Resources

These resources could be helpful:

Chidi Eze

Frontend Engineer

I'm a frontend engineer and a technical content creator, I love it once it has to do with javascript.