When you embed a YouTube video on a webpage, you have to think that many users will not click to play the video, some of them want to do something else like reading the contents on the page or whatever features the website is providing.
That’s why it’s a good idea to implement lazy loading on the video. Lazy loading is the practice of delaying the load of resources until they’re actually needed.
By reducing the initial load time, you can offer a better experience to the users and you are also doing SEO since Google takes into account the initial load time.
How to implement this lazy loading on Vue.js?
Example of usage:
<LazyYoutube
max-width="414px"
aspect-ratio="16:9"
thumbnail-quality="standard"
src="https://www.youtube.com/watch?v=CCBpeKLaX3o"
/>
The 'LazyYoutubeVideo' component renders only thumbnail images on pager renders. On clicking the play button the YouTube video gets downloaded.
You can see the behavior on my website where a YouTube video is embedded on the home page: https://rollideo.com/
For more details about the installation, check the github documentation:
https://github.com/andrewvasilchuk/vue-lazy-youtube-video
Top comments (0)