Build a Vue.js Youtube API Video Thumbnail Extractor or Grabber From URL Web App in Browser Using Javascript Full Project For Beginners

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

 

 

<div id="app">
  <input type="text"  autocomplete=false  v-model="url">
  <div v-if="youtube_thumbnail_downloader">
    <button @click="download(thumbnailpreview)" >Preview</button>
    <img :src="thumbnailpreview" alt="thumbnailpreview">
  </div>
  
  <div v-if="youtube_thumbnail_downloader"><button @click="download(thumbnailhq)" >Highest resolution</button><img :src="thumbnailhq" alt="thumbnailhq"></div>
  <div v-if="youtube_thumbnail_downloader"><button @click="download(thumbnailmq)" >Medium resolution</button><img  :src="thumbnailmq" alt="thumbnailmq"></div>
  <div v-if="youtube_thumbnail_downloader"><button @click="download(thumbnaillq)" >Lowest resolution</button><img  :src="thumbnaillq" alt="thumbnaillq"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

 

 

 

new Vue({
  data(){
    return{
      url: '',
      thumbnailpreview: '',
      thumbnailhq: '',
      thumbnailmq: '',
      thumbnaillq: '',
    }
  },
  methods:{
    download(url){
      var a = document.createElement('a');
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  },
  computed:{
    youtube_thumbnail_downloader() {
      var vm = this
      if(vm.url){
        var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,
            match = vm.url.match(regExp),
            vidurl = '',
            thumbnailpreview = '',
            thumbnailhq = '',
            thumbnailmq = '',
            thumbnaillq = ''
        if (match &&  match[1].length == 11) {
          vidurl = match[1];
          thumbnailpreview = 'http://img.youtube.com/vi/'+vidurl+'/mqdefault.jpg';
          thumbnailhq = 'http://img.youtube.com/vi/'+vidurl+'/maxresdefault.jpg';
          thumbnailmq = 'http://img.youtube.com/vi/'+vidurl+'/hqdefault.jpg';
          thumbnaillq = 'http://img.youtube.com/vi/'+vidurl+'/mqdefault.jpg';
        } else {
          alert("The URL you have entered maybe incorrect. Please Enter a correct URL.");
          return false
        }
        
        
        vm.thumbnailpreview = thumbnailpreview;
        vm.thumbnailhq = thumbnailhq;
        vm.thumbnailmq = thumbnailmq;
        vm.thumbnaillq = thumbnaillq;
        return true
      }else{
        return false
      }
    }
  }
}).$mount('#app')

Leave a Reply