EN
JavaScript - get YouTube image url by video id
0 points
In this article, we would like to show you how to get YouTube image url by video id using JavaScript.
Quick solution:
xxxxxxxxxx1
var videoId = 'SOGpvHun6vg';2
3
var url1 = `https://i.ytimg.com/vi/${videoId}/default.jpg`; // size: 120x904
var url2 = `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`; // size: 320x1805
var url3 = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`; // size: 480x3606
var url4 = `https://i.ytimg.com/vi/${videoId}/sddefault.jpg`; // size: 640x4807
var url5 = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`; // size: depends on YouTube and video resolutionWarning:
To avoid common mistake, remember not to add
wwwto the src, e.g. usehttp://i.ytimg.cominstead of:http://www.i.ytimg.com.
Used resources:
- Video id:
SOGpvHun6vg - Full link:
https://www.youtube.com/watch?v=SOGpvHun6vg
xxxxxxxxxx1
const videoId = 'SOGpvHun6vg';xxxxxxxxxx1
https://i.ytimg.com/vi/${videoId}/${imageQuality}${imageNumber}.jpgimageQuality | imageNumber | Description |
|---|---|---|
'' | 'default', '1', '2' or '3' | low quality |
'mq' | 'default', '1', '2' or '3' | medium quality |
'hq' | 'default', '1', '2' or '3' | high quality |
'sd' | 'default', '1', '2' or '3' | standard quality |
'maxres' | 'default', '1', '2' or '3' | maximum resolution |
| image type | returned URLs |
|---|---|
| Main frame image |
xxxxxxxxxx1 https://i.ytimg.com/vi/SOGpvHun6vg/default.jpg2 https://i.ytimg.com/vi/SOGpvHun6vg/mqdefault.jpg3 https://i.ytimg.com/vi/SOGpvHun6vg/hqdefault.jpg4 https://i.ytimg.com/vi/SOGpvHun6vg/sddefault.jpg5 https://i.ytimg.com/vi/SOGpvHun6vg/maxresdefault.jpg
|
Random frame images (1-3) |
xxxxxxxxxx1 https://i.ytimg.com/vi/SOGpvHun6vg/1.jpg2 https://i.ytimg.com/vi/SOGpvHun6vg/mq1.jpg3 https://i.ytimg.com/vi/SOGpvHun6vg/hq1.jpg4 https://i.ytimg.com/vi/SOGpvHun6vg/sd1.jpg5 https://i.ytimg.com/vi/SOGpvHun6vg/maxres1.jpgxxxxxxxxxx1 https://i.ytimg.com/vi/SOGpvHun6vg/2.jpg2 https://i.ytimg.com/vi/SOGpvHun6vg/mq2.jpg3 https://i.ytimg.com/vi/SOGpvHun6vg/hq2.jpg4 https://i.ytimg.com/vi/SOGpvHun6vg/sd2.jpg5 https://i.ytimg.com/vi/SOGpvHun6vg/maxres2.jpgxxxxxxxxxx1 https://i.ytimg.com/vi/SOGpvHun6vg/3.jpg2 https://i.ytimg.com/vi/SOGpvHun6vg/mq3.jpg3 https://i.ytimg.com/vi/SOGpvHun6vg/hq3.jpg4 https://i.ytimg.com/vi/SOGpvHun6vg/sd3.jpg5 https://i.ytimg.com/vi/SOGpvHun6vg/maxres3.jpg |
In this example, we create a function that accepts two arguments YouTube video id and image quality. It returns the src of the YouTube video thumbnail image.
xxxxxxxxxx1
const createImageUrl = (videoId, imageQuality) => {2
return 'https://i.ytimg.com/vi/' + videoId + '/' + imageQuality + 'default.jpg';3
};4
5
6
// Usage example:7
8
const videoId = 'SOGpvHun6vg';9
10
console.log(createImageUrl(videoId, '')); // size: 120x9011
console.log(createImageUrl(videoId, 'mq')); // size: 320x18012
console.log(createImageUrl(videoId, 'hq')); // size: 480x36013
console.log(createImageUrl(videoId, 'sd')); // size: 640x48014
console.log(createImageUrl(videoId, 'maxres')); // size: depends on YouTube and video resolutionIn this example, we present a reusable functions that get the images using given YouTube video id and appends them inside the placeholderElement.
xxxxxxxxxx1
2
<html>3
<body>4
<head>5
<style>6
7
img {8
display: block;9
}10
11
</style>12
</head>13
<script>14
15
function createImageUrl(videoId, imageQuality) {16
return 'https://i.ytimg.com/vi/' + videoId + '/' + imageQuality + 'default.jpg';17
}18
19
function appendImageElement(parentElement, videoId, imageQuality, placeholderElement) {20
var imageElement = document.createElement('img');21
imageElement.src = createImageUrl(videoId, imageQuality);22
parentElement.insertBefore(imageElement, placeholderElement);23
}24
25
26
// Usage example:27
28
var videoId = 'SOGpvHun6vg';29
30
appendImageElement(document.body, videoId, ''); // size: 120x9031
appendImageElement(document.body, videoId, 'mq'); // size: 320x18032
appendImageElement(document.body, videoId, 'hq'); // size: 480x36033
appendImageElement(document.body, videoId, 'sd'); // size: 640x48034
appendImageElement(document.body, videoId, 'maxres'); // size: depends on YouTube and video resolution35
36
</script>37
</body>38
</html>
