vue3-thumbnail-extractor.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="extractedThumbnail" />
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  setup() {
    const videoURL = ref("");

    const extractedThumbnail = computed(() => {
      if (!videoURL.value) return "";
      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 (videoURL.value.includes(vimeoURL)) {
        path = "https://" + videoURL.value.replace(regex, "vumbnail.com/");
        return path + ".jpg";
      } else if (videoURL.value.includes(dailymotionURL)) {
        path = videoURL.value.replace(
          regex,
          "https://www.dailymotion.com/thumbnail/"
        );
        return path;
      } else {
        path =
          "https://" + videoURL.value.replace(regex, "img.youtube.com/vi/");
        return path + "/hqdefault.jpg"; // for high quality videos, you can use maxresdefault.jpg
      }
    });

    return {
      videoURL,
      extractedThumbnail
    };
  }
};
</script>