{"id":27904,"date":"2022-03-24T19:58:17","date_gmt":"2022-03-24T19:58:17","guid":{"rendered":"http:\/\/create-video-thumbnail-with-preview-on-hover-in-nuxtjs"},"modified":"2025-03-02T13:10:34","modified_gmt":"2025-03-02T21:10:34","slug":"create-video-thumbnail-with-preview-on-hover-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-video-thumbnail-with-preview-on-hover-in-nuxtjs\/","title":{"rendered":"Video thumbnail with preview on hover in Nuxtjs"},"content":{"rendered":"

Popular video streaming platforms like Netflix, Hulu, Youtube, e.t.c; give users an option to watch previews of listed videos while hovering. This feature helps users save time by watching preliminaries and quickly determining if it is relevant to them before watching it.<\/p>\n

This post will discuss creating video thumbnail previews on hover using Cloudinary<\/a> and Nuxt.js<\/a>. At the end of this tutorial, we will learn how to use Cloudinary\u2019s AI-Based video preview feature to generate video previews that improve users\u2019 experience while browsing through videos.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a CodeSan<\/a>d<\/a>box<\/a>, and you can fork it to run the code.<\/p>\n<\/div>\n \n

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

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

Prerequisites<\/h2>\n

The following steps in this post require JavaScript and Vue.js experience. Experience with Nuxt.js 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.js starter project by navigating to the desired directory and running the command below in our terminal.<\/p>\n

npx create-nuxt-app video_thumbnail && cd video_thumbnail\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>\n    project name: <PRESS ENTER>\n    programming langauge: <JAVASCRIPT>\n    package manager: <NPM>\n    UI framework: <TAILWIND CSS>\n    Nuxt.js modules: <AXIOS - PROMISE BASED HTTP CLIENT>\n    Linting tools: <ESLINT, PRETTIER>\n    Testing framework: <NONE>\n    Rendering mode: <UNIVERSAL (SSR\/STATIC<\/span>)\n    Deployment target: <STATIC<\/span>\/JAMSTACK HOSTING>\n    Deployment tools: <JSCONFIG.JSON>\n    Continous integration: <NONE>\n    Version 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_thumbnail<\/code>, and navigates into the project directory.<\/p>\n
Configuring Cloudinary in Nuxt.js<\/h3>\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        ...\n        htmlAttrs: {\n         ...\n        },\n        meta<\/span>: [\n          ...\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 our 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<\/em> Cloudinary\u2019s cloud name<\/strong> by logging into the Cloudinary console<\/em><\/a>.<\/em><\/p>\n
Video sourcing and upload to Cloudinary<\/h2>\n
Next, we need to upload sample videos to generate thumbnails and previews.\nVideo URLs<\/strong><\/p>\n
TailwindCSS<\/a> is a utility-first CSS framework packed with classes to help us style our web page.<\/p>\n