javascript - Get youtube animated thumbnail

Question

Is there 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 an animated .gif of about 3 seconds.

Answer 1

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...

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 programmatically (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.