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.
The final project can be viewed on Codesandbox.
You can find the full source code on my Github repository.
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.
yarn create nuxt-app nuxtjs-public-video-thumbnails
# OR
npx create-nuxt-app nuxtjs-public-video-thumbnails
# OR
npm init nuxt-app nuxtjs-public-video-thumbnails
Code language: PHP (php)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
cd nuxtjs-public-video-thumbnails
yarn dev
# OR
npm run dev
Code language: PHP (php)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:
yarn add @nuxtjs/cloudinary
# OR
npm install @nuxtjs/cloudinary
Code language: CSS (css)Let us now add it to the modules section of our nuxt.config.js file.
// nuxt.config.js
export default {
...
modules: [
'@nuxtjs/cloudinary'
]
...
}
Code language: JavaScript (javascript)Let’s configure our Cloudinary instance by adding a cloudinary section in our nuxt.config.js file.
// nuxt.config.js
export default {
...
cloudinary: {
cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME
}
}
Code language: JavaScript (javascript)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.
touch .env
Code language: CSS (css)We will then set the value in the .env file
<!-- .env -->
NUXT_ENV_CLOUDINARY_CLOUD_NAME=<top-secret-cloud-name>
Code language: HTML, XML (xml)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.
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.
// pages/index.vue
<script>
export default {
name: 'IndexPage',
data(){
return {
types:[
{text:"YouTube", value:"youtube"},
{text:"Hulu", value:"hulu"},
{text:"Vimeo", value:"vimeo"},
{text:"Animoto", value:"animoto"},
{text:"World Star HipHop", value:"worldstarhiphop"},
{text:"Daily Motion", value:"dailymotion"}
],
form:{
type:null,
identifier:null
},
placeholderThumbnail:'https://via.placeholder.com/850x500?text=Public+video+thumbnail',
thumbnail: null
}
}
}
</script>
Code language: HTML, XML (xml)-
typesare the platforms supported by the API. -
formcontains our form submitted data -
placeholderThumbnailis a picture to show before we generate the thumbnail -
thumbnailwill store the URL of the thumbnail we will generate.
Let us now add our form to our page template.
<!-- pages/index.vue -->
<template>
...
<img
:src="thumbnail ? thumbnail : placeholderThumbnail"
alt="Public video thumbnail"
/>
...
<form @reset="thumbnail = null" @submit.prevent="submit">
<div>
<label for="type">Type</label>
<div>
<select required v-model="form.type" id="type" name="type" type="text">
<option v-for="type in types" :value="type.value" :key="type.value">
{{type.text}}
</option>
</select>
</div>
</div>
<div>
<label for="identifier">Identifier (URL or unique identifier)</label>
<div>
<input v-model="form.identifier" required type="text" name="identifier" id="identifier">
</div>
</div>
<div>
<button type="submit">
Submit
</button>
<button type="reset">
Reset
</button>
</div>
</form>
...
</template>
Code language: HTML, XML (xml)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.
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.
// pages/index.vue
<script>
export default {
...
methods:{
submit(){
this.thumbnail = this.$cloudinary.image
.url( this.form.identifier, {type: this.form.type} );
}
}
}
</script>
Code language: HTML, XML (xml)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.
