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:
var videoId = 'SOGpvHun6vg';
var url1 = `https://i.ytimg.com/vi/${videoId}/default.jpg`; // size: 120x90
var url2 = `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`; // size: 320x180
var url3 = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`; // size: 480x360
var url4 = `https://i.ytimg.com/vi/${videoId}/sddefault.jpg`; // size: 640x480
var url5 = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`; // size: depends on YouTube and video resolution
Warning:
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
Practical example
Video id
const videoId = 'SOGpvHun6vg';
URL Template
https://i.ytimg.com/vi/${videoId}/${imageQuality}${imageNumber}.jpg
Configurations
imageQuality | 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 |
Fully builded URLs
| image type | returned URLs |
|---|---|
| Main frame image |
|
Random frame images (1-3) |
|
Runnable example
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.
// ONLINE-RUNNER:browser;
const createImageUrl = (videoId, imageQuality) => {
return 'https://i.ytimg.com/vi/' + videoId + '/' + imageQuality + 'default.jpg';
};
// Usage example:
const videoId = 'SOGpvHun6vg';
console.log(createImageUrl(videoId, '')); // size: 120x90
console.log(createImageUrl(videoId, 'mq')); // size: 320x180
console.log(createImageUrl(videoId, 'hq')); // size: 480x360
console.log(createImageUrl(videoId, 'sd')); // size: 640x480
console.log(createImageUrl(videoId, 'maxres')); // size: depends on YouTube and video resolution
Reusable function
In this example, we present a reusable functions that get the images using given YouTube video id and appends them inside the placeholderElement.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<head>
<style>
img {
display: block;
}
</style>
</head>
<script>
function createImageUrl(videoId, imageQuality) {
return 'https://i.ytimg.com/vi/' + videoId + '/' + imageQuality + 'default.jpg';
}
function appendImageElement(parentElement, videoId, imageQuality, placeholderElement) {
var imageElement = document.createElement('img');
imageElement.src = createImageUrl(videoId, imageQuality);
parentElement.insertBefore(imageElement, placeholderElement);
}
// Usage example:
var videoId = 'SOGpvHun6vg';
appendImageElement(document.body, videoId, ''); // size: 120x90
appendImageElement(document.body, videoId, 'mq'); // size: 320x180
appendImageElement(document.body, videoId, 'hq'); // size: 480x360
appendImageElement(document.body, videoId, 'sd'); // size: 640x480
appendImageElement(document.body, videoId, 'maxres'); // size: depends on YouTube and video resolution
</script>
</body>
</html>