0

I am using javascript to get the links from a webpage like this:

function GetTheLinks()
{
 var linksArray = [];
 for(var i = 0; i < document.links.length; i++)
 {
    var link = document.links[i];
      linksArray.push( link.innerHTML );
      linksArray.push( link.innerText );
      linksArray.push( link.href );
  }
  return linksArray;
}

This works fine.

I would alike to retrieve the image urls associated with the links in a YT page. Because I didn't find any documentation about it, I have just added this to my code:

linksArray.push( link.img );

This however didn't work.

How could I get the image associated with a link?

The element for a YT link looks like this:

<img id="img" class="style-scope yt-img-shadow" alt="" width="168" src="https://i.ytimg.com/vi/qPityOntlS4/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&amp;rs=AOn4CLAQZFtofXXUlC1Ra5EPzJopddMcow">

The selector just says:

#img

XPath:

//*[@id="img"]

Full XPath:

/html/body/ytd-app/div[1]/ytd-page-manager/ytd-watch-flexy/div[5]/div[2]/div/div[3]/ytd-watch-next-secondary-results-renderer/div[2]/ytd-item-section-renderer/div[3]/ytd-compact-video-renderer[2]/div[1]/ytd-thumbnail/a/yt-img-shadow/img

Thank you!

enter image description here

tmighty
  • 10,734
  • 21
  • 104
  • 218

1 Answers1

0

YouTube thumbnails servers: img.youtube.com & i.ytimg.com

Get YouTube thumbnail from URL

const URL = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
const videoId = URL.split("v=")[1]; // get the video id from the URL
const imageURL = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`; // get the image URL
// webp format: const imageURL = `https://img.youtube.com/vi_webp/${videoId}/hqdefault.webp`;

document.querySelector('img').src = imageURL; // set the image URL
<img src="">

Get all YouTube thumbnails on the page

Used regex method to get VideoID; Regex Match all characters between two strings

/(?<=LETTER1).*(?=LETTER2)/g

Used in the code: /(?<=vi[/]).*(?=[/])/g.exec(URLS) The slash has been enclosed in square brackets to be recognized as a filtered string.

const youtubeImages = document.querySelectorAll(".ytd-thumbnail #img");

for (let i = 0; i < youtubeImages.length; i++) {
  const URLS = [youtubeImages[i].src]; // get the image url
  const videoID = /(?<=vi[/]).*(?=[/])/g.exec(URLS); // get the video id from the URL with regex
  const imageURLS = `https://img.youtube.com/vi/${videoID}/hqdefault.jpg`; // get the image URL

  const img = document.createElement("img"); // create an image element
  img.src = `${imageURLS}`; // set the image URL
  document.body.appendChild(img); // append the image to the body
}
<h2>YouTube Thumbnails:</h2>
<!-- DOM layout for youtube thumbnails -->
<yt-img-shadow ftl-eligible="" class="style-scope ytd-thumbnail no-transition" style="background-color: transparent;" object-fit="" loaded=""><!--css-build:shady--><img id="img" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/1ukSR1GRtMU/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&amp;rs=AOn4CLAdPjzhv9Xfiji3sptBMQuVePC1Aw"></yt-img-shadow>

<yt-img-shadow ftl-eligible="" class="style-scope ytd-thumbnail no-transition" style="background-color: transparent;" loaded=""><!--css-build:shady--><img id="img" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/w-7RQ46RgxU/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&amp;rs=AOn4CLD9DhK1Y4ENDyEHNO1O7lc6zKVDlg"></yt-img-shadow>

<h2>Images Taken:</h2>

I recommend jsdom to access DOM from Outside

YouTube video thumbnails sizes and formats

samurai
  • 1
  • 2