How to display thumbnail of YouTube Videos in Android

Question

I writing an app where i want to display a list of YouTube videos. But I want the list to display the video title with some other info but also show a thumbnail of the video like it does when we go www.youtube.com

Can someone help me please on How to display the thumbnail for a video URL?

score 46 · Answer 1 · edited Jun 20 '20 at 09:12

With the Combination of Two Accepted Answer

How to make YouTube video thumbnails in android?

and

How to get video thumbnail of youtube video in android list in android?

Finally You just have to play with ID of YOUTUBE URL only.

I found one PHP Answer for same question in that they have described like:

Each YouTube video has 4 generated images. They are predictably formatted as follows:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (ie. one of 1.jpg, 2.jpg, 3.jpg) is:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

For the high quality version of the thumbnail use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

There is also a medium quality version of the thumbnail, using a url similar to the HQ:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

For the standard definition version of the thumbnail, use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

For the maximum resolution version of the thumbnail use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

All of the above urls are available over https too. Just change http to https in any of the above urls.

Additionally, the slightly shorter hostname i3.ytimg.com works in place of img.youtube.com in the example urls above.

Example:

I have one URL https://www.youtube.com/watch?v=-OKrloDzGpU

Now I will just take ID from URL i.e.: -OKrloDzGpU

Medium Image: http://img.youtube.com/vi/-OKrloDzGpU/mqdefault.jpg

HD Image: http://img.youtube.com/vi/-OKrloDzGpU/hqdefault.jpg

Load Images in Android using Glide or Picasso:

// Picasso        
Picasso.with(context)
       .load("http://img.youtube.com/vi/-OKrloDzGpU/mqdefault.jpg")
       .into(imageView);

// Glide
Glide.with(this)
     .load("http://img.youtube.com/vi/-OKrloDzGpU/mqdefault.jpg")
     .into(imageView);

Thank you. Hope it will helps you all.

do you know what additional info is required to be presented on youtube thumbnail? Smth like youtube tm, youtube "play" icon, and etc. — Silwester, Jun 19 '18 at 15:34
Didn't you have any problem with the delay on the response ? — poramo, Feb 19 '20 at 16:11

score 15 · Answer 2 · answered Mar 20 '18 at 06:16

If you have URL of Youtube video. Use below code to get medium / high quality thumbnail URL

        String url = "https://www.youtube.com/watch?v=tResEeK6P5I"
        String videoId = url.split("v=")[1]; //you will get this video id "tResEeK6P5I"

        String thumbnailMq = "http://img.youtube.com/vi/"+videoId+/mqdefault.jpg //medium quality thumbnail

        String thumbnailHq = "http://img.youtube.com/vi/"+videoId+/hqdefault.jpg //high quality thumbnail

        //your final urls will be like 
        http://img.youtube.com/vi/tResEeK6P5I/mqdefault.jpg
        http://img.youtube.com/vi/tResEeK6P5I/hqdefault.jpg

Thank you so much, it is really helpful to use image instead of slow loading youtTube API thumbnail — Leenah, May 22 '18 at 07:24

score 8 · Accepted Answer · answered Sep 06 '11 at 19:39

8

Try this:

Parse video ID from the URL: this is the 'v' parameter in URL. I.e. 'xAiiwSXVRiw' in http://www.youtube.com/watch?v=xAiiwSXVRiw
Get the video metadata via Youtube Gdata URL: http://gdata.youtube.com/feeds/api/videos/xAiiwSXVRiw
Parse the XML that you get back and look for <media:thumbnail url='..'>. The 'url' attribute contains to the thumbnail url.

answered Sep 06 '11 at 19:39

Peter Knego

79,991
11
123
154

5

This answer is obsolete – pixel Apr 08 '16 at 11:40
3

OBSOLETE answer. URL responds with - "No longer available" – Pranav Mahajan Sep 03 '17 at 21:45

score 3 · Answer 4 · edited May 15 '17 at 10:26

3

Link to download Glide jar file http://grepcode.com/snapshot/repo1.maven.org/maven2/com.github.bumptech.glide/glide/3.6.0

String url = "https://img.youtube.com/vi/"+videoURL.split("\\=")[1]+"/0.jpg";
Glide.with(this).load(url).into(imageView);

edited May 15 '17 at 10:26

Petter Friberg

21,252
9
60
109

answered May 15 '17 at 10:24

user3922209

29
3

score 2 · Answer 5 · answered Apr 06 '18 at 16:32

This question is old, but it is still coming in the top Google's search answers, so this us how I did it with the Android YouTube API.

YouTubeThumbnailView thumbnail = findViewById(R.id.thumbnail);
thumbnail.initialize(YOUTUBE_API_KEY, new YouTubeThumbnailView.OnInitializedListener() {

    @Override
    public void onInitializationSuccess(YouTubeThumbnailView youTubeThumbnailView, 
                                        YouTubeThumbnailLoader youTubeThumbnailLoader) {
        youTubeThumbnailLoader.setVideo(youtubeID);
        youTubeThumbnailLoader.setOnThumbnailLoadedListener(new YouTubeThumbnailLoader.OnThumbnailLoadedListener() {

            @Override
            public void onThumbnailLoaded(YouTubeThumbnailView youTubeThumbnailView, String s) {
                //need to release the loader!!!
                youTubeThumbnailLoader.release();
            }

            @Override
            public void onThumbnailError(YouTubeThumbnailView youTubeThumbnailView, 
                                         YouTubeThumbnailLoader.ErrorReason errorReason) {
                //need to release the loader!!!
                youTubeThumbnailLoader.release();
            }
        });
     }

     @Override
     public void onInitializationFailure(YouTubeThumbnailView youTubeThumbnailView, 
                                    YouTubeInitializationResult youTubeInitializationResult) {
     //handle error here
     }
});

YOUTUBE_API_KEY get your api key in here

youtubeID You need to use the video's ID not full URL.

Documentation here.

OhhhThatVarun · Answer 6 · 2021-05-25T13:10:31.477

All of the above answers are doing string manipulation which is not needed. You can get the if the id very easily using Uri

Kotlin

val videoId = Uri.parse("https://www.youtube.com/watch?v=dQw4w9WgXcQ").getQueryParameter("v")
val thumbnailUri = Uri.parse("https://img.youtube.com/vi/${videoId}/0.jpg")
Glide.with(this).load(thumbnailUri).into(imageView)

Java

String videoId = Uri.parse("https://www.youtube.com/watch?v=dQw4w9WgXcQ").getQueryParameter("v");
Uri thumbnailUri = Uri.parse("https://img.youtube.com/vi/${videoId}/0.jpg");
Glide.with(this).load(thumbnailUri).into(imageView);

mdsabir shaik · Answer 7 · 2021-06-26T20:45:45.333

if you want high quality thumbnail but not available for all video

Width | Height | URL
------|--------|----
640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sd1.jpg
640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sd2.jpg
640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sd3.jpg
640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sddefault.jpg
1280  | 720    | https://i.ytimg.com/vi/<VIDEO ID>/hq720.jpg
1920  | 1080   | https://i.ytimg.com/vi/<VIDEO ID>/maxresdefault.jpg

if you want thumbnail that available for all video (relatively low quality)

Width | Height | URL
------|--------|----
120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/1.jpg
120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/2.jpg
120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/3.jpg
120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/default.jpg
320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mq1.jpg
320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mq2.jpg
320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mq3.jpg
320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mqdefault.jpg
480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/0.jpg
480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hq1.jpg
480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hq2.jpg
480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hq3.jpg
480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hqdefault.jpg

So Maximum quality thumbnail that available for all video is 480x360.

you can use link :https://i.ytimg.com/vi/<VIDEO ID>/0.jpg

String videoId = IfXNjuoqt0Q;
String thumnailLink = "https://i.ytimg.com/vi/"+videoId+"/0.jpg";

https://i.ytimg.com/vi/IfXNjuoqt0Q/0.jpg

To load image in Android

// Picasso        
Picasso.with(context)
       .load("https://i.ytimg.com/vi/IfXNjuoqt0Q/0.jpg")
       .into(imageView);

// Glide
Glide.with(this)
     .load("https://i.ytimg.com/vi/IfXNjuoqt0Q/0.jpg")
     .into(imageView);

--------Upto that already answer above------

If you want to remove black-bar from thumbnail 480x360 (maximum quality image that available for all video in youtube),but problem its come with black-bar


import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.Log;
import android.widget.ImageView;

import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

public class ThumbnailHandler {

    public static Bitmap RemoveBlackBar(Bitmap bitmap){

        if (bitmap.getWidth() == 480 && bitmap.getHeight() == 360 ){

            int[] pixels = new int[bitmap.getWidth() * bitmap.getHeight()];
            int[] pixels_out = new int[bitmap.getWidth() * bitmap.getHeight()];

            // get pixel array from source
            bitmap.getPixels(pixels, 0, bitmap.getWidth(), 0, 0, bitmap.getWidth(), bitmap.getHeight());

            for (int y=0; y<270; y++){

                for (int x=0; x < bitmap.getWidth() ; x++){
                    pixels_out [y * bitmap.getWidth() + x] = pixels [(y+45) * bitmap.getWidth() + x];
                }
            }

            Bitmap bmOut = Bitmap.createBitmap(bitmap.getWidth(), 270, bitmap.getConfig());
            bmOut.setPixels(pixels_out, 0, bitmap.getWidth(), 0, 0, bitmap.getWidth(), 270);


            return bmOut;
        }else {
            return bitmap;
        }
    }

    public static Bitmap getBitmapFromURL(String src) {
        try {
            URL url = new URL(src);
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            Bitmap myBitmap = BitmapFactory.decodeStream(input);
            return myBitmap;
        } catch (Exception e) {
            Log.e("shabir", "err: "+e );
            e.printStackTrace();
            return null;
        }
    }

    public static void getYtThumbnail_480_270(String url,YtThumbnailDownloadListener listener){
        new Thread(new Runnable() {
            @Override
            public void run() {
                Bitmap bitmap = getBitmapFromURL(url);
                bitmap = RemoveBlackBar(bitmap);
                listener.onThumbnailDownloaded(bitmap);
            }
        }).start();
    }

    public static void getYtThumbnail_480_270(String url, ImageView target, Activity activity){
        new Thread(new Runnable() {
            @Override
            public void run() {
                Bitmap bitmap = getBitmapFromURL(url);
                Bitmap finalBitmap = RemoveBlackBar(bitmap);
                activity.runOnUiThread(() -> {

                    target.setImageBitmap(finalBitmap);

                });
            }
        }).start();
    }

    public interface YtThumbnailDownloadListener{
        void onThumbnailDownloaded(Bitmap bitmap);
    }
}

copy above class in to your project

Above class convert 480x360 Thumbnail to 480x270 to remove black bar,

To load image in Android


// url
url = "https://i.ytimg.com/vi/IfXNjuoqt0Q/0.jpg";


// call to load thumbnail in Image view        
ThumbnailHandler.getYtThumbnail_480_270(url,
                                        imageView,
                                        MainActivity.this);

// call to download thumbnail in bitmap format
ThumbnailHandler.getYtThumbnail_480_270(url, new ThumbnailHandler.YtThumbnailDownloadListener() {
                    @Override
                    public void onThumbnailDownloaded(Bitmap bitmap) {
                        // Use thumbnail bitmap
                    }
                });

Maximum quality thumbnail (480x270), available for all video , without black bar

score 0 · Answer 8 · answered Feb 25 '22 at 09:54

I'm quite late for this Answer, but in case anyone needs help this can be helpful, let's get started:

from the answer of Shailesh and Abhishek, i have created new answer which can be helpful for youtube url's when you have these three kind of urls(all three videos are same just url format is different):

https://youtu.be/Fs8fsrngI3Q
http://www.youtube.com/watch?v=Fs8fsrngI3Q&feature=youtu.be
https://www.youtube.com/watch?v=Fs8fsrngI3Q&ab_channel=SoftwareTestingAndAutomation

and you can use given method to get thumbnail of video:

public static String extractYoutubeId(String url) {
    String id = "";
    try {
        if (url.contains("youtu.be/")) {
            return url.substring(url.lastIndexOf("/") + 1);
        }

        String query = new URL(url).getQuery();
        if (query == null) return "";

        String[] param = query.split("&");
        for (String row : param) {
            String[] param1 = row.split("=");
            if (param1[0].equals("v")) {
                id = param1[1];
            }
        }
    } catch (MalformedURLException e) {
        e.printStackTrace();
    }
    return id;
}

Use this method like this:

String videoId = extractYoutubeId(videoUrl);
videoThumbUrl = "https://img.youtube.com/vi/" + videoId + "/0.jpg";

How to display thumbnail of YouTube Videos in Android

8 Answers8

Example:

Medium Image: http://img.youtube.com/vi/-OKrloDzGpU/mqdefault.jpg

HD Image: http://img.youtube.com/vi/-OKrloDzGpU/hqdefault.jpg

Load Images in Android using Glide or Picasso:

If you want to remove black-bar from thumbnail 480x360 (maximum quality image that available for all video in youtube),but problem its come with black-bar

Linked

Related