JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<a class="video-link-img" href="https://www.youtube.com/watch?v=YE7VzlLtp-4">
  <img src="" style="width:300px" />
</a>
<br />
<a class="video-link-img" href="https://vimeo.com/1084537">
  <img src="" style="width:300px" />
</a>

JavaScript

$(".video-link-img").each(function() {
  var videoUrl = $(this).attr("href");
  GetImageFromVideoURL(videoUrl, $(this).find("img"));
});

/***
  Get video thumbnails
***/
function GetImageFromVideoURL(videoUrl, element) {
  var i,
    image_url,
    isValidURL,
    isVValidURL,
    isEmbValidURL,
    isShortValidURL,
    isVimeoURL,
    isvVimeoURL,
    isShortVimeoURL,
    uniqueIdLength,
    uniqueID,
    thumbnail_src;
  uniqueIdLength = 11;
  image_url = videoUrl;

  var url;
  if (image_url != null) {
    url = image_url;
  } else {
    url = "";
  }

  if (url.search("youtu") != -1) {
    isValidURL = image_url.indexOf("youtube.com/watch?v=");
    isVValidURL = image_url.indexOf("youtube.com/v/");
    isEmbValidURL = image_url.indexOf("youtube.com/embed/");
    isShortValidURL = image_url.indexOf("youtu.be/");

    if (isValidURL == -1 && isVValidURL == -1 && isEmbValidURL == -1 && isShortValidURL == -1) {
      return false;
    }

    if (isValidURL != -1) {
      i = image_url.indexOf("v=");
    } else if (isVValidURL != -1) {
      i = image_url.indexOf("v/");
    } else if (isEmbValidURL != -1) {
      i = image_url.indexOf("embed/");
      i = i + 4;
    } else if (isShortValidURL != -1) {
      i = image_url.indexOf("youtu.be/");
      i = i + 7;
    }
    i = i + 2;

    uniqueID = image_url.substr(i, uniqueIdLength);
    imageURL = 'https://img.youtube.com/vi/' + uniqueID + '/maxresdefault.jpg';

    element.attr("src", imageURL);

  } else if ((url.search("vimeo") != -1)) {
    isVimeoURL = image_url.indexOf("vimeo.com/video");
    isvVimeoURL = image_url.indexOf("www.vimeo.com/video");
    isShortVimeoURL = image_url.indexOf("vimeo.com/");
    if (isVimeoURL == -1 && isvVimeoURL == -1 && isShortVimeoURL == -1) {
      return false;
    }

    if (isVimeoURL != -1) {
      i = image_url.indexOf("video/");
    } else if (isShortVimeoURL != -1) {
      i = image_url.indexOf("vimeo.com/");
      i = i + 4;
    }
    i = i + 6;

    uniqueID =...