Get youtube animated thumbnail

by Guilherme Lopes   Last Updated October 09, 2019 21:26 PM

Is that a way to embed the animated thumbnail from youtube in my website? I am not talking about the static thumbnail but the one that looks like a gif. The animated thumbnail of more or less 3 seconds

Thanks



Answers 3


I don't know if it will help you

but when you go to search page in youtube you can access the object

window.ytInitialData

Here we have node called: window.ytInitialData.contents.twoColumnSearchResultsRenderer.primaryContents.sectionListRenderer.contents["0"].itemSectionRenderer.contents[2].videoRenderer.richThumbnail.movingThumbnailRenderer.movingThumbnailDetails.thumbnails["0"].url

Thumbanail gif youtube

maybe you can find a way to retrieve this data

access search page like this and: https://www.youtube.com/results?search_query=USPwv1zwWV4 What I have tried in console:

let videos = window.ytInitialData.contents.twoColumnSearchResultsRenderer.primaryContents.sectionListRenderer.contents["0"].itemSectionRenderer.contents;


if (!videos.length) { // includes other renderers i.e: "did you mean ..."
    console.log('no videos in search'); 
    //return;
}

let video = videos.filter( v => v.videoRenderer && v.videoRenderer.videoId == "USPwv1zwWV4")

if (!video.length) { 
    console.log('no video by that ID in search'); 
    //return;
}

let thumbs = video[0].videoRenderer.richThumbnail.movingThumbnailRenderer.movingThumbnailDetails.thumbnails;

if (!thumbs.length) { 
    console.log('no moving thumbs for that video'); 
    //return;
}

console.log(thumbs[0].url);
Rafael Faria
Rafael Faria
May 13, 2018 15:09 PM

As of June 2019:

1. Getting static thumbnail images is straightforward

  • They're exposed through the YouTube API and, even better, they follow a very simple and uniform URL structure (more details here).

2. Youtube's animated thumbnails are supported in a limited number of browsers.

  • Apparently, desktop browsers Chrome and Opera (source)
  • The thumbnails, btw, are in WebP image format, which has a wider browser support.

3. Getting animated thumbails for a limited number of videos is relatively easy.

You can, for example, inspect the network activity in your browser dev tools (more details for Chrome).

With the network panel open, visit a page listing that includes the desired video, clear the network activity (you can also select 'Img' to display only activity related to images) and hover the desired video. Then just right click on the desired resource and copy the url.

In case an image helps...

enter image description here

The urls of the animated thumbnails look like the following:

https://i.ytimg.com/an_webp/zdOmNiXvM3w/mqdefault_6s.webp?du=3000&sqp=CPDloOgF&rs=AOn4CLD9rYflZAMK6qBIbYJDoQZLk9UARw

4. As far as I know, it is currently not possible to get the animated thumbnails programatically (without webscraping)

  • In other words, given a video ID, it is currently not possible to get the animated thumbnail URL through the API or a defined URL pattern.

PS.: Hoping that somebody can prove me wrong on point #4, here are a few examples of those URLs:

https://i.ytimg.com/an_webp/zdOmNiXvM3w/mqdefault_6s.webp?du=3000&sqp=CPDloOgF&rs=AOn4CLD9rYflZAMK6qBIbYJDoQZLk9UARw

https://i.ytimg.com/an_webp/oIIDZq4nZpo/mqdefault_6s.webp?du=3000&sqp=CLyqoegF&rs=AOn4CLD9DyqMoxBTiOPTUX8FQJmUfiu8NA

https://i.ytimg.com/an_webp/X9tU8ybzcFs/mqdefault_6s.webp?du=3000&sqp=CLHroOgF&rs=AOn4CLAX8j6uWUko_54aPJLwkbAe_cUR3w

Changing the video ID or other parameters does not return a valid thumbnail.

ludovico
ludovico
June 18, 2019 03:46 AM

Gifs.com has a free API for generating water-marked gifs from a media-related URL.

https://gifs.com/dashboard/api

It doesn't explicitly mention it but it does in fact accept Youtube URLs and generates a preview from them.

Here's an example of how to use it with cURL

curl -XPOST -H "Content-type: application/json" -d '{ "source": "https://www.youtube.com/watch?v=74KxwkLjE9E" }' 'https://api.gifs.com/media/import'

It takes about a minute or two to generate so if you store/cache the gifs with a server you could create your own personal preview generator.

Here's the archived link to the documentation https://web.archive.org/web/20190408212718/http://docs.gifs.com/docs/authentication-key

Sam Carlton
Sam Carlton
October 09, 2019 21:24 PM

Related Questions


Is it possible to search YouTube subtitles?

Updated February 21, 2019 04:26 AM

Get current latency from Youtube live video

Updated September 05, 2018 22:26 PM

A list of videos from Youtube with 400 ERROR CODE

Updated November 26, 2017 14:26 PM