{"id":27781,"date":"2022-04-06T02:21:02","date_gmt":"2022-04-06T02:21:02","guid":{"rendered":"http:\/\/create-custom-video-ads-in-nuxtjs"},"modified":"2022-04-06T02:21:02","modified_gmt":"2022-04-06T02:21:02","slug":"create-custom-video-ads-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-custom-video-ads-in-nuxtjs\/","title":{"rendered":"Create custom video ads in NuxtJS"},"content":{"rendered":"

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.<\/p>\n

This post discusses creating custom video adverts using Cloudinary<\/a> and Nuxt<\/a>. 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.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a CodeSan<\/a>d<\/a>box<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Github link here<\/a>.<\/p>\n

Prerequisites<\/h2>\n

To fully grasp the concepts presented in this tutorial, a good knowledge of JavaScript and Vue.js is required. Experience with Nuxt isn\u2019t a requirement, but it\u2019s nice to have.<\/p>\n

We also need a Cloudinary account<\/a> to store and transform media assets. Signup<\/strong><\/a> is completely free<\/strong>.<\/p>\n

Getting Started<\/h2>\n

We need to create a Nuxt starter project by navigating to the desired directory and running the command below in our terminal.<\/p>\n

npx create-nuxt-app video_ads && cd video_ads\n<\/code><\/pre>\n
This command will ask us some questions on how to configure our application. We can answer the questions as shown below:<\/p>\n
Ok to proceed? (y) < PRESS \"y\"<\/span> and<\/span> hit ENTER>\nproject name: <PRESS ENTER>\nprogramming langauge: <JAVASCRIPT>\npackage manager: <NPM>\nUI framework: <TAILWIND CSS>\nNuxt.js modules: <AXIOS - PROMISE BASED HTTP CLIENT>\nLinting tools: <ESLINT, PRETTIER>\nTesting framework: <NONE>\nRendering mode: <UNIVERSAL (SSR\/STATIC<\/span>)\nDeployment target: <STATIC<\/span>\/JAMSTACK HOSTING>\nDeployment tools: <JSCONFIG.JSON>\nContinous integration: <NONE>\nVersion control system: <GIT>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
The command creates a Nuxt.js project with TailwindCSS called video_ads<\/code> and navigates into the project directory.<\/p>\n
Configuring Cloudinary in Nuxt<\/strong><\/p>\n
First, we need to modify the nuxt.config.js<\/code> file by adding Cloudinary CDNs to the link<\/code>  and script<\/code> section as shown below:<\/p>\n
    head: {\n        title<\/span>: 'video_thumbnail'<\/span>,\n    htmlAttrs<\/span>: {\n      lang<\/span>: 'en'<\/span>,\n    },\n    meta<\/span>: [\n      { charset<\/span>: 'utf-8'<\/span> },\n      { name<\/span>: 'viewport'<\/span>, content<\/span>: 'width=device-width, initial-scale=1'<\/span> },\n      { hid<\/span>: 'description'<\/span>, name<\/span>: 'description'<\/span>, content<\/span>: ''<\/span> },\n      { name<\/span>: 'format-detection'<\/span>, content<\/span>: 'telephone=no'<\/span> },\n    ],\n    link<\/span>: [\n      { rel<\/span>: 'icon'<\/span>, type<\/span>: 'image\/x-icon'<\/span>, href<\/span>: '\/favicon.ico'<\/span> },\n      {\n        rel<\/span>: 'stylesheet'<\/span>,\n        href<\/span>: 'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.css'<\/span>,\n      },\n    ],\n    script<\/span>: [\n      {\n        src<\/span>: 'https:\/\/unpkg.com\/cloudinary-core@latest\/cloudinary-core-shrinkwrap.min.js'<\/span>,\n      },\n      {\n        src<\/span>: 'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.js'<\/span>,\n      },\n    ],\n},\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we need to include Cloudinary\u2019s cloud name as an environment variable. To do this, first, we need to create a .env<\/code> file in the root directory, and in this file, add the snippet below:<\/p>\n
NUXT_ENV_CLOUDINARY_CLOUD_NAME=<YOUR CLOUD NAME HERE>\n<\/code><\/pre>\n
PS<\/strong>: We can get Cloudinary\u2019s cloud name<\/strong> by logging into the<\/em> Cloudinary console<\/em><\/a>.<\/em><\/p>\n
Video sourcing and upload to Cloudinary<\/h2>\n
Next, we need to upload a sample video to create a custom video advert.<\/p>\n
Video URL<\/strong><\/p>\n
TailwindCSS<\/a> is a utility-first CSS framework packed with classes to help us style our web page.<\/p>\n