Vue.js filter to extract YouTube, Vimeo or Dailymotion thumbnail using the video URL

vue-thumbnail-extractor.md

Vue.js filter to extract thumbnail from a YouTube, Vimeo or Dailymotion video

Add the following code to your template videos.vue

<template>
  <div>
    <label for="videourl">
      Vimeo or YouTube URL
    </label>
    <br/>
    <input type="text" v-model="videoURL" placeholder="Enter URL" id="videourl">

    <div v-if="videoURL != ''">
      Extracted Thumbnail: <br/>
      <img :src="videoURL | extractThumbnail" />
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      videoURL: ""
    };
  },
  filters: {
    extractThumbnail: function (image) {
      if (!image) return "";
      // regex to check the URL
      const regex = /^(http(s)??\:\/\/)?(www\.)?((youtube\.com\/watch\?v=)|(youtu.be\/)|(vimeo\.com\/)|(youtube\.com\/shorts\/)|(dailymotion\.com\/))?/i;
      let vimeoURL = "vimeo.com";
      let dailymotionURL = "dailymotion.com";
      let path = "";

      if (image.includes(vimeoURL)) {
        path = "https://" + image.replace(regex, "vumbnail.com/");
        return path + ".jpg";
      } else if (image.includes(dailymotionURL)) {
        path = image.replace(regex, "https://www.dailymotion.com/thumbnail/");
        return path;
      } else {
        path = "https://" + image.replace(regex, "img.youtube.com/vi/");
        return path + "/hqdefault.jpg"; // for high quality videos, you can use maxresdefault.jpg
      }
    }
  }
}
</script>

Note: This is for Vue 2. For Vue 3, check this out