When the media contain a playlist, the thumbnail do not load correctly

The way to get the thumbnail for video list is "https://www.youtube.com/oembed?url=https://www.youtube.com/embed/videose..."

{
  "title": "Drupal Training - Site Building",
  "author_name": "Acquia",
  "author_url": "/@AcquiaTV",
  "type": "video",
  "height": 113,
  "width": 200,
  "version": "1.0",
  "provider_name": "YouTube",
  "provider_url": "https://www.youtube.com/",
  "thumbnail_height": 360,
  "thumbnail_width": 480,
  "thumbnail_url": "https://i.ytimg.com/vi/rAR1QDAS7og/hqdefault.jpg",
  "html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/videoseries?list=PLpVC00PAQQxGFC06mLqoPT4hHaA1Ykn2Z\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>"
}

And the max resolution can be get using "https://i.ytimg.com/vi/rAR1QDAS7og/maxresdefault.jpg"

We added an example of what we were trying to do. Obtain the thumbnail from oembed URL "https://www.youtube.com/oembed?url=https://www.youtube.com/embed/videose..." and because is an async call, then call "setYoutubeThumbnailFromId" function or something similar to overrides the thumbnail id.

It could be possible to do it on the Filter plugin using PHP and set the thumbnail URL, it could avoid async petitions on the front end.

At the moment we can not invest more time, because we will migrate to media, which has another strategy for the thumbnails.

YoutubeCookies.prototype.getJsonFromUrl = function(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "json";
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response, this);
    } else {
      callback(status, xhr.response, this);
    }
  };
  xhr.send();
};

YoutubeCookies.prototype.setVideoIdPlaylist = function(url) {

  let oembed_url = 'https://www.youtube.com/oembed?url=' + url;

  this.getJsonFromUrl(oembed_url, function(err, data) {
    if (err == null) {
      let regex = /(?:https?:\/\/)(?:i\.ytimg\.com\/vi\/)([0-9A-Za-z_-]*)/i;
      let thumbnail_url = data.thumbnail_url;
      let match = thumbnail_url.match(regex);
      if (err == null && typeof data === "object"
        && data.hasOwnProperty("thumbnail_url")
        && data.thumbnail_url.match(regex)) {
        let videoIdMatches = data.thumbnail_url.match(regex);
        if (videoIdMatches !== null && videoIdMatches.length > 0) {
          this.setYoutubeThumbnailFromId(videoIdMatches[videoIdMatches.length - 1]);
        }
      }

    }
  });

};

/**
 * Given a youtube video URL get its ID.
 *
 * @param {string} url
 *   Youtube video URL.
 *
 * @return {null|*}
 *   Video id, if exists.
 */
YoutubeCookies.prototype.getYoutubeIdFromUrl = function(url) {
  // if (url.includes('embed/videoseries')) {
  //   this.setVideoIdPlaylist(url);
  // }