In this article, we are going to explore the implementation to load lazily the youtube videos. The VueJS plugin called 'vue-lazy-youtube-video' provides use lazy loading functionality for the youtube videos.
The following are configurable properties of the lazy load component:
From the above image, we can observe all resources are loaded on page render. In the next coming steps, we will implement the same sample by configuring the 'LazyYoutubeVideo' component.
About The vue-lazy-youtube-video Plugin:
In general, if we configure a youtube Iframe URL on our website, on rendering along with youtube video also loads many other resources like js files, thumbnails, etc. All these resource files are not required until we want to start the video to play. To gain our website performance, we need to implement an approach to load these resources lazily.
So lazy loading of youtube videos can be achieved in the VueJS application using the vue-lazy-youtube-video plugin. The plugin on rendering only fetches 'Thumbnail' image of the video on website renders, on clicking the play button then the library starts fetching all video-related resources. The key features it provides are:
- Reduces initial load size of the video around to 1MB
- For modern browsers fetches thumbnail of format '.webp', for older browsers fetches '.jpg' as a fallback
- All the properties are easily configurable.
- src - for the youtube URL.
- alt - alternate source value for the video thumbnail image.
- buttonLabel - the value of the aria-label attribute of the play button element.
- aspectRatio - the aspect ratio of the video.
- previewImageSize - the size of the thumbnail, generated by youtube. Available value like 'default'(Original thumbnail image size), 'mqdefault'(Medium quality thumbnail image size), 'sddefault'(Standard definition thumbnail image size), 'hddefault'(High-quality thumbnail image size), 'maxresdefault'(Maximum resolution thumbnail image size).
- autoPlay - play video on rendering of the page.
Create A Vue Sample App:
Let's understand the lazy loading of youtube videos by implementing the sample code in a sample VueJS application.
Command To Install Vue CLI Globally On Your System:
npm run -g @vue/cli
Command To Create Vue App:
vue create your_application_name
After creating a sample application run the following command to start the application.
Command To Run Vue App:
npm run serve
Install vue-lazy-youtube-video NPM Package:
Command To Install Lazy Loading Plugin:
npm intall vue-lazy-youtube-video --save
After installation NPM packages reference will be added to the package.json file.Direct Iframe Configuration:
Let's begin by integrating youtube embedded iframe links directly without any lazy loading concept. So here we can understand what are resources will be loaded for the youtube video, so that it gives us a clear how useful to use lazy concepts.
For the basic design, we will use bootstrap CSS, so add a bootstrap CSS file on the index.html
public/index.html:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">Now update the HelloWorld.vue file with iframe URLs as follows.
src/components/HelloWorld.vue:(script part)
<script> export default { name: "HelloWorld", data() { return { videos: [ { src: "https://www.youtube.com/embed/4GK9zDWKyjg" }, { src: "https://www.youtube.com/embed/ufqjK6sV_8g" }, { src: "https://www.youtube.com/embed/xns0Vaip4wc" } ] }; } }; </script>
- Initialized collection of youtube videos that will be rendered on our page.
<template> <div class="row"> <div class="card" style="width: 30rem;" v-for="(video, index) in videos" :key="index"> <div class="card-body" > <iframe :src="video.src" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe> </div> </div> </div> </template>
- Collection of youtube URL's binding by looping them.
Load vue-lazy-youtube-video Plugin CSS:
Now let's import the vue-lazy-youtube-video plugin CSS file on to the main.js(entry file of vue application).
src/main.js:
import 'vue-lazy-youtube-video/dist/style.css'
Load vue-lazy-youtube-video Component Globally:
Now we will configure the vue-lazy-youtube-video component on main.js(entry file). So that the lazy loading components will available throughout our application. We can configure at each component level also if we want.
src/main.js:
import Vue from 'vue' import App from './App.vue' import 'vue-lazy-youtube-video/dist/style.css' import LazyYoutubeVideo from 'vue-lazy-youtube-video'; Vue.component('LazyYoutubeVideo',LazyYoutubeVideo); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
- (Line: 4-6) 'LazyYoutubeVideo' component imported and configured to Vue instance.
Test <LazyYoutubeVideo> Component:
Now we will use the 'LazyYoutubeVideo' component in our sample. The 'LazyYoutubeVideo' component renders only thumbnail images on pager renders. On clicking the play button youtube video gets downloaded. Now let's update the 'HelloWorld.vue' component to use the 'LazyYoutubeVideo' component as below.
src/components/HelloWorld.vue:(Update Html Part)
<template> <div class="row"> <div class="card" style="width: 30rem;" v-for="(video, index) in videos" :key="index"> <div class="card-body"> <LazyYoutubeVideo :src="video.src" /> </div> </div> </div> </template>
- (Line: 5) rendering the 'LazyYoutubeVideo' component.
That's all about the core functionality of the vue-lazy-youtube-video plugin. Here we only discussed the 'src' property, but you can play with all other configurable properties that discussed at the beginning.
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Hopefully, I think this article delivered some useful information on the vue-lazy-youtube-video plugin to integrate into VueJs application. I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment