13

I am using youtube_player_flutter to play youtube video in my app. Is there any way to get thumbnail of the youtube video in flutter. I have an youtube video URL and I need to get the thumbnail of that url.

Thanks in advance.

Siva Perumal
  • 457
  • 2
  • 8
  • 23
  • You can see [this post](https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api) Hope it helps you! – redgreen May 12 '20 at 04:22

2 Answers2

34

Assuming you have a youtube URL of the uploaded video. if you have it then you have to format it like the below URL.

https://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg  --  Just add your youtube video Id here

Code Snippet:

Image.network('https://img.youtube.com/vi/6cwnBBAVIwE/0.jpg'),

6cwnBBAVIwE- This is the sample id I added here. You can add yours youtube video id.

You can get the youtube id from the video url, The id is the last 11 digits from the youtube id

For example here the video url is https://www.youtube.com/watch?v=6cwnBBAVIwE

The id for this video is 6cwnBBAVIwE

To get the id :

String url = "https://www.youtube.com/watch?v=H4p6njjPV_o"
String id = url.substring(url.length -11);

OR

if the above solution not working then a more advanced method to resolve it.

1. Get the ID from URL

  String? convertUrlToId(String url, {bool trimWhitespaces = true}) {
  if (!url.contains("http") && (url.length == 11)) return url;
  if (trimWhitespaces) url = url.trim();

  for (var exp in [
    RegExp(
        r"^https:\/\/(?:www\.|m\.)?youtube\.com\/watch\?v=([_\-a-zA-Z0-9]{11}).*$"),
    RegExp(
        r"^https:\/\/(?:www\.|m\.)?youtube(?:-nocookie)?\.com\/embed\/([_\-a-zA-Z0-9]{11}).*$"),
    RegExp(r"^https:\/\/youtu\.be\/([_\-a-zA-Z0-9]{11}).*$")
  ]) {
    Match? match = exp.firstMatch(url);
    if (match != null && match.groupCount >= 1) return match.group(1);
  }

  return null;
}

2. Get the thumbnail URL

String getThumbnail({
  required String videoId,
  String quality = ThumbnailQuality.standard,
  bool webp = true,
}) =>
    webp
        ? 'https://i3.ytimg.com/vi_webp/$videoId/$quality.webp'
        : 'https://i3.ytimg.com/vi/$videoId/$quality.jpg';

Usage:

void main() {
  String? videoId = convertUrlToId(
      "https://www.youtube.com/watch?v=6cwnBBAVIwE");
  String thumbnailUrl = getThumbnail(videoId: videoId ?? "");
  print(thumbnailUrl); 
}

Output:

https://i3.ytimg.com/vi_webp/6cwnBBAVIwE/sddefault.webp

Jitesh Mohite
  • 31,138
  • 12
  • 157
  • 147
  • 1. They are not digits 2. why substring? what if the length changes in the future? You can use Uri.parse('url').queryParams['v'] – Razvan Cristian Lung Jan 19 '21 at 14:40
  • This is flutter how you can use Uri.parse('url').queryParams['v']?? – Jitesh Mohite Jan 20 '21 at 07:33
  • This is a working solution but a bad one. Again, what is the length changes in the future? What if at the end the is also a play playlist like this `https://www.youtube.com/watch?v=ZmDBbnmKpqQ&list=RDCLAK5uy_lBNUteBRencHzKelu5iDHwLF6mYqjL-JU` what do you do then? – Razvan Cristian Lung Jan 20 '21 at 14:42
  • 3
    To get a 16:9 version of the image, replace the ```/0``` with ```/mqdefault``` – Apps 247 Aug 22 '21 at 08:49
9
// File created by
// Lung Razvan <long1eu>
// on 20/01/2021

void main() {
  final String thumbnail = getYoutubeThumbnail('https://www.youtube.com/watch?v=ISPK_eWX3ls');
  print(thumbnail);
}

String getYoutubeThumbnail(String videoUrl) {
  final Uri uri = Uri.tryParse(videoUrl);
  if (uri == null) {
    return null;
  }

  return 'https://img.youtube.com/vi/${uri.queryParameters['v']}/0.jpg';
}
Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
Razvan Cristian Lung
  • 5,661
  • 5
  • 25
  • 49