Advertisement, popularly known as ads, is a marketing strategy that aims to sell a product or service to a target audience. Popular video sharing and streaming platforms like Youtube, Twitch, e.t.c, generate significant revenue by embedding adverts on their videos to promote products and businesses.

This post discusses creating custom video adverts using Cloudinary and Nuxt. At the end of this tutorial, we will learn how to serve videos in Nuxt using Cloudinary, play an advert at a particular time and for a specific period.

Sandbox

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

Github link here.

Prerequisites

To fully grasp the concepts presented in this tutorial, a good knowledge of JavaScript and Vue.js is required. Experience with Nuxt isn’t a requirement, but it’s nice to have.

We also need a Cloudinary account to store and transform media assets. Signup is completely free.

Getting Started

We need to create a Nuxt starter project by navigating to the desired directory and running the command below in our terminal.

1npx create-nuxt-app video_ads && cd video_ads

This command will ask us some questions on how to configure our application. We can answer the questions as shown below:

1Ok to proceed? (y) < PRESS "y" and hit ENTER>
2project name: <PRESS ENTER>
3programming langauge: <JAVASCRIPT>
4package manager: <NPM>
5UI framework: <TAILWIND CSS>
6Nuxt.js modules: <AXIOS - PROMISE BASED HTTP CLIENT>
7Linting tools: <ESLINT, PRETTIER>
8Testing framework: <NONE>
9Rendering mode: <UNIVERSAL (SSR/STATIC)
10Deployment target: <STATIC/JAMSTACK HOSTING>
11Deployment tools: <JSCONFIG.JSON>
12Continous integration: <NONE>
13Version control system: <GIT>

The command creates a Nuxt.js project with TailwindCSS called video_ads and navigates into the project directory.

TailwindCSS is a utility-first CSS framework packed with classes to help us style our web page.

Configuring Cloudinary in Nuxt

First, we need to modify the nuxt.config.js file by adding Cloudinary CDNs to the link and script section as shown below:

1head: {
2        title: 'video_thumbnail',
3    htmlAttrs: {
4      lang: 'en',
5    },
6    meta: [
7      { charset: 'utf-8' },
8      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
9      { hid: 'description', name: 'description', content: '' },
10      { name: 'format-detection', content: 'telephone=no' },
11    ],
12    link: [
13      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
14      {
15        rel: 'stylesheet',
16        href: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.css',
17      },
18    ],
19    script: [
20      {
21        src: 'https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js',
22      },
23      {
24        src: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.js',
25      },
26    ],
27},

Next, we need to include Cloudinary’s cloud name as an environment variable. To do this, first, we need to create a .env file in the root directory, and in this file, add the snippet below:

1NUXT_ENV_CLOUDINARY_CLOUD_NAME=<YOUR CLOUD NAME HERE>

PS: We can get Cloudinary’s cloud name by logging into the Cloudinary console.

Video sourcing and upload to Cloudinary

Next, we need to upload a sample video to create a custom video advert.

Video URL

• https://res.cloudinary.com/dtgbzmpca/video/upload/v1645539487/dancing-catvideo.webm

In our Cloudinary dashboard, we uploaded the video by clicking on the Media Library tab, clicking on Upload, selecting the Web Address option, inputting the url, and clicking on the Arrow Button to upload.

After uploading the video, we will see it displayed on the console with its publicId. The ID will come in handy when creating a custom video advert.

Creating the Custom Video Ads

We modify the index.vue file in the pages folder to the following:

1<template>
2  <div class="flex flex-col items-center p-8">
3    <h1 class="text-xl font-medium text-blue-900 mb-8">Cloudinary Video Ads</h1>
4    <div class="relative">
5      <video :id="`video-player`" class="w-96 h-96" muted controls></video>
6      <div
7        v-if="showAds"
8        class="flex justify-between w-96 py-4 px-4 bg-white shadow-lg absolute bottom-0 z-10"
9      >
10        <section class>
11          <p>Read more contents from</p>
12          <a href="https://hackmamba.io/" target="_blank" class="font-medium text-blue-700">Here</a>
13        </section>
14        <button class="font-bold" @click="closeShowAds">X</button>
15      </div>
16    </div>
17  </div>
18</template>
19
20<script>
21export default {
22  name: 'IndexPage',
23  data() {
24    return {
25      cld: null,
26      player: null,
27      showAds: false,
28      interval: null,
29      timeRun: 0
30    }
31  },
32  mounted() {
33    this.player = this.videoList;
34    this.cld = cloudinary.Cloudinary.new({
35      cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
36      secure: true,
37    })
38    this.player = this.cld.videoPlayer(`video-player`)
39    this.player.source(`dancing-catvideo.jpg`)
40    this.player.play()
41  },
42  methods: {
43    closeShowAds() {
44      this.showAds = false;
45    },
46    openShowAds() {
47      this.showAds = true;
48    },
49  },
50  created() {
51    this.interval = setInterval(() => {
52      this.timeRun += 1;
53      if (this.timeRun === 10) {
54        this.openShowAds()
55      }
56      if (this.timeRun === 20) {
57        this.closeShowAds()
58      }
59    }, 1000);
60  },
61}
62</script>

The snippet above does the following:

• Create data properties to manage Cloudinary instance, video element, toggling advert, monitoring video player, and showing advert.
• Use the mounted lifecycle method to create a Cloudinary instance, initialize the video player, assign a source to the video using the uploaded video’s publicId, and play the video on page load.
• Create a closeShowAds and openShowAds method to close and show the advert.
• Use the created lifecycle method to monitor the video to show an advert after 10 seconds and close the advert after running for additional 10 seconds.
• Markup to show the video and advert section.

With that done, we can start a development server using the command below:

1npm run dev

Conclusion

This post discussed creating custom video adverts using Cloudinary and Nuxt.

These resources might be helpful:

• TailwindCSS.
• Cloudinary Video Transformation.