Explain Codes LogoExplain Codes Logo

Get img thumbnails from Vimeo?

javascript
api-engineering
vimeo
thumbnail
Nikita BarsukovbyNikita Barsukov·Dec 10, 2024
TLDR

Fetch thumbnails from Vimeo using https://vimeo.com/api/v2/video/{video_id}.json. Replace {video_id} with the actual video ID you're interested in. Then, extract the thumbnail link from the JSON response.

fetch('https://vimeo.com/api/v2/video/{video_id}.json') .then(res => res.json()) .then(data => console.log(data[0].thumbnail_large)) // fishing out the big fish .catch(console.error); // Oops something went wrong!

Breaking down the API response

The API response from the Vimeo Simple API comes in various flavors, namely JSON, PHP, and XML. It's an all-you-can-eat data buffet providing small, medium, and large thumbnails. Pick the chunk of data that suits your needs best!

If you're using PHP, here's how you reel in the medium-sized thumbnail:

$json = file_get_contents('https://vimeo.com/api/v2/video/{video_id}.json'); // casting the net $data = json_decode($json, true); // unspooling the strings $thumbnail_url = $data[0]['thumbnail_medium']; // gotcha medium fish!

XML fanatics, you can parse the XML response instead. But remember, JSON goes hand-in-hand with JavaScript like fish and chips.

Alternate strategies and points to consider

Getting cozy with jQuery

If you're a jQuery aficionado, you can jazz up fetching thumbnails with a dash of Ajax:

$.getJSON('https://vimeo.com/api/v2/video/{video_id}.json', function(data) { $("img").attr("src", data[0].thumbnail_large); // snapshot of the big fish, coming right up! });

Faster thumbnails with vumbnail.com

For speed demons, vumbnail.com offers cached Vimeo thumbnails:

<img src="https://vumbnail.com/{video_id}_medium.jpg">

Vumbnail.com stores thumbnails for 28 days, faster access, and a shorter wait time.

Building your own thumbnail server

For the DIY crowd, with a flair for control and customization, a GitHub repository enables you to build a personalized thumbnail server.

As with any API, be ready for potential pitfalls such as communication breakdowns or unexpected response formats. Put on your coding helmets and implement robust error handling!