I wrote a function to extract the video ID from a YouTube URL and return the corresponding thumbnail image URL. However, the function doesn’t seem to be working as expected.
const getYouTubeThumbnail = (url: string) => {
const videoId = url.split("v=")[1];
return https://img.youtube.com/vi/${videoId}/hqdefault.jpg;
};
When I pass a YouTube video URL like https://www.youtube.com/watch?v=-jz8mrwU_Fc&ab_channel=10Alytics, I expect to get https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg, but instead, it seems to either not work or return an incorrect URL.
What am I doing wrong? Is there a better way to extract the video ID?
the function above but it doesn’t work as intended
2
Answers
Your getYouTubeThumbnail function works as intended with regular youtube links, however it may run into problems when extra params are added after the videoID.
Using
url.split("v=")[1]
retrieves the portion of the URL that comes after "v=".by applying
.split("&")[0]
, it separates any additional parameters that may follow the video ID and captures only the first segment, ensuring that you obtain just the video ID.Splitting on
v=
gives you not just thev
value, but everything after it in the URL.i.e. Splitting
https://www.youtube.com/watch?v=-jz8mrwU_Fc&ab_channel=10Alytics
gets you-jz8mrwU_Fc&ab_channel=10Alytics
.I suggest the following as more robust: