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-thumbnails2# OR3npx create-nuxt-app nuxtjs-public-video-thumbnails4# OR5npm 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-thumbnails23yarn dev4# OR5npm 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/cloudinary2# OR3npm install @nuxtjs/cloudinary
Let us now add it to the modules
section of our nuxt.config.js
file.
1// nuxt.config.js2export 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.js2export default {3 ...4 cloudinary: {5 cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME6 }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.vue2<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:null18 },19 placeholderThumbnail:'https://via.placeholder.com/850x500?text=Public+video+thumbnail',20 thumbnail: null21 }22 }23}24</script>
types
are the platforms supported by the API.form
contains our form submitted dataplaceholderThumbnail
is a picture to show before we generate the thumbnailthumbnail
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 <img5 :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 Submit29 </button>30 <button type="reset">31 Reset32 </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.vue2<script>3export default {4 ...5 methods:{6 submit(){7 this.thumbnail = this.$cloudinary.image8 .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.