Introduction

When building a content website, users will want to share assets such as links to already uploaded video content such as Netflix shows and Youtube videos. To provide an enjoyable user experience, we will want the users to see a thumbnail of the video as they share the link. Let us see how we can retrieve these thumbnails without complexities.

Codesandbox

The final project can be viewed on Codesandbox.

You can find the full source code on my Github repository.

Nuxt.Js project installation

Nuxt.Js is a Vue.Js framework that boasts of simplicity and productivity. To set it up ensure you have yarn or npm v5.2+/v6.1+ installed. Navigate to your preferred working directory and open the terminal.

1yarn create nuxt-app nuxtjs-public-video-thumbnails
2# OR
3npx create-nuxt-app nuxtjs-public-video-thumbnails
4# OR
5npm init nuxt-app nuxtjs-public-video-thumbnails

This will initialize a prompt session to customize your installation. Here are our recommended defaults:

Project name: nuxtjs-public-video-thumbnails Programming language: JavaScript Package manager: Yarn UI framework: Tailwind CSS Nuxt.js modules: N/A Linting tools: N/A Testing frameworks: None Rendering mode: Universal (SSR/SSG) Deployment target: Server (Node.js hosting) Development tools: N/A What is your Github username? < your-github-username > Version control system: Git

Once complete, you may run the project. It will be available on http://localhost:3000

1cd nuxtjs-public-video-thumbnails
2
3yarn dev
4# OR
5npm run dev

@nuxtjs/cloudinary setup

Cloudinary is a media management platform that allows us to make the most of our media assets through its comprehensive platform and integrations. We will be using their API to obtain the video thumbnails.

To add their recommended Nuxt.Js plugin: @nuxtjs/cloudinary, open the terminal in the project folder and run the following command:

1yarn add @nuxtjs/cloudinary
2# OR
3npm install @nuxtjs/cloudinary

Let us now add it to the modules section of our nuxt.config.js file.

1// nuxt.config.js
2export default {
3    ...
4    modules: [
5        '@nuxtjs/cloudinary'
6    ]
7    ...
8}

Let's configure our Cloudinary instance by adding a cloudinary section in our nuxt.config.js file.

1// nuxt.config.js
2export default {
3 ...
4 cloudinary: {
5    cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME
6 }
7}

In the above code, we reference the NUXT_ENV_CLOUDINARY_CLOUD_NAME environmental variable. These are values that we consume inside our codebase but configure them outside of our code in environmental configuration files.

To set the NUXT_ENV_CLOUDINARY_CLOUD_NAME environmental variable, we will first create an environmental variable.

1touch .env

We will then set the value in the .env file

1<!-- .env -->
2NUXT_ENV_CLOUDINARY_CLOUD_NAME=<top-secret-cloud-name>

To obtain a Cloudinary cloud name, ensure you have an account. If you don't have an account, you may set one up here. You can then retrieve your cloud name conveniently on your account dashboard.

Form configuration

Before we start generating the thumbnails, we first have to receive the video platform and unique identifier. These are the values which we can capture with a simple HTML form. Let us first setup our page state.

1// pages/index.vue
2<script>
3export default {
4  name: 'IndexPage',
5  data(){
6    return {
7      types:[
8        {text:"YouTube", value:"youtube"}, 
9        {text:"Hulu", value:"hulu"}, 
10        {text:"Vimeo", value:"vimeo"}, 
11        {text:"Animoto", value:"animoto"}, 
12        {text:"World Star HipHop", value:"worldstarhiphop"}, 
13        {text:"Daily Motion", value:"dailymotion"}
14      ],
15      form:{
16        type:null,
17        identifier:null
18      },
19      placeholderThumbnail:'https://via.placeholder.com/850x500?text=Public+video+thumbnail',
20      thumbnail: null
21    }
22  }
23}
24</script>

types are the platforms supported by the API.
form contains our form submitted data
placeholderThumbnail is a picture to show before we generate the thumbnail
thumbnail will store the URL of the thumbnail we will generate.

Let us now add our form to our page template.

1<!-- pages/index.vue -->
2<template>
3    ...
4          <img 
5            :src="thumbnail ? thumbnail : placeholderThumbnail" 
6            alt="Public video thumbnail"
7          />
8          ...
9            <form @reset="thumbnail = null" @submit.prevent="submit">
10              <div>
11                <label for="type">Type</label>
12                <div>
13                  <select required v-model="form.type" id="type" name="type" type="text">
14                    <option v-for="type in types" :value="type.value" :key="type.value">
15                      {{type.text}}
16                    </option>
17                  </select>
18                </div>
19              </div>
20              <div>
21                <label for="identifier">Identifier (URL or unique identifier)</label>
22                <div>
23                  <input v-model="form.identifier" required type="text" name="identifier" id="identifier">
24                </div>
25              </div>
26              <div>
27                <button type="submit">
28                  Submit
29                </button>
30                <button type="reset">
31                  Reset
32                </button>
33              </div>
34            </form>
35      ...
36</template>

In the above code, we display the placeholderThumbnail if the thumbnail has no value. When the form is submitted, we call the submit method. When the form is reset, we allow the normal HTML Form reset to occur but also reset the thumbnail value. The form allows the user to select the platform type and input the unique identifier.

Obtaining video thumbnails

When the submit method is triggered, we need to fetch the video thumbnail. We do this by submitting the identifier where we would normally submit the public_id and submit the type in the options.

1// pages/index.vue
2<script>
3export default {
4  ...
5  methods:{
6    submit(){
7      this.thumbnail = this.$cloudinary.image
8                .url( this.form.identifier, {type: this.form.type} );
9    }
10  }
11}
12</script>

The above code snippet will fetch the video thumbnail and set it on the thumbnail variable. Once set, it will be displayed instead of the placeholder.

To read more about this feature, feel free to review the documentation on fetching thumbnails of public videos.

Retrieving Thumbnails of Public Videos in NuxtJS