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?

Solution 1

Try this:

1. Parse video ID from the URL: this is the 'v' parameter in URL. I.e. 'xAiiwSXVRiw' in http://www.youtube.com/watch?v=xAiiwSXVRiw

2. Get the video metadata via Youtube Gdata URL: http://gdata.youtube.com/feeds/api/videos/xAiiwSXVRiw

3. Parse the XML that you get back and look for <media:thumbnail url='..'>. The 'url' attribute contains to the thumbnail url.

Solution 2

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.

Solution 3

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

Solution 4

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);

Solution 5

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.

View more solutions

Comments

[pixel]

This answer is obsolete

[Pranav Mahajan]

OBSOLETE answer. URL responds with - "No longer available"

[Leenah]

Thank you so much, it is really helpful to use image instead of slow loading youtTube API thumbnail

[Silwester]

do you know what additional info is required to be presented on youtube thumbnail? Smth like youtube tm, youtube "play" icon, and etc.

[poramo]

Didn't you have any problem with the delay on the response ?

[Damercy]

Works so well! Thanks much! 🙌🎉

[eawedat]

"/mqdefault.jpg"; "/hqdefault.jpg";