I want to get a thumbnail image for videos from Vimeo.
When getting images from Youtube I just do like this:
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
Any idea how to do for Vimeo?
26 Answers
For those still wanting a way to get the thumbnail via URL only, just like Youtube, I built a small application that fetches it with just the Vimeo ID.
https://vumbnail.com/358629078.jpg
Just plug in your video ID and it will pull it and cache it for 28 days so it serves fast.
Here are a couple of examples in HTML:
Simple Image Example
<img src="https://vumbnail.com/358629078.jpg" />
<br>
<br>
Modern Responsive Image Example
<img
srcset="
https://vumbnail.com/358629078_large.jpg 640w,
https://vumbnail.com/358629078_medium.jpg 200w,
https://vumbnail.com/358629078_small.jpg 100w
"
sizes="(max-width: 640px) 100vw, 640px"
src="https://vumbnail.com/358629078.jpg"
/>If you want to spin up your own you can do so here.
This is a quick crafty way of doing it, and also a way to pick a custom size.
I go here:
http://vimeo.com/api/v2/video/[VIDEO ID].php
Download the file, open it, and find the 640 pixels wide thumbnail, it will have a format like so:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_640.jpg
You take the link, change the 640 for - for example - 1400, and you end up with something like this:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_1400.jpg
Paste it on your browser search bar and enjoy.
Cheers,
I created a CodePen that fetches the images for you.
HTML
<input type="text" id="vimeoid" placeholder="257314493" value="257314493">
<button id="getVideo">Get Video</button>
<div id="output"></div>
JavaScript:
const videoIdInput = document.getElementById('vimeoid');
const getVideo = document.getElementById('getVideo');
const output = document.getElementById('output');
function getVideoThumbnails(videoid) {
fetch(`https://vimeo.com/api/v2/video/${videoid}.json`)
.then(response => {
return response.text();
})
.then(data => {
const { thumbnail_large, thumbnail_medium, thumbnail_small } = JSON.parse(data)[0];
const small = `<img src="${thumbnail_small}"/>`;
const medium = `<img src="${thumbnail_medium}"/>`;
const large = `<img src="${thumbnail_large}"/>`;
output.innerHTML = small + medium + large;
})
.catch(error => {
console.log(error);
});
}
getVideo.addEventListener('click', e => {
if (!isNaN(videoIdInput.value)) {
getVideoThumbnails(videoIdInput.value);
}
});
UPDATE: This solution stopped working as of Dec 2018.
I was looking for the same thing and it looks like most answers here are outdated due to Vimeo API v2 being deprecated.
my php 2¢:
$vidID = 12345 // Vimeo Video ID
$tnLink = json_decode(file_get_contents('https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/' . $vidID))->thumbnail_url;
with the above you will get the link to Vimeo default thumbnail image.
If you want to use different size image, you can add something like:
$tnLink = substr($tnLink, strrpos($tnLink, '/') + 1);
$tnLink = substr($tnLink, 0, strrpos($tnLink, '_')); // You now have the thumbnail ID, which is different from Video ID
// And you can use it with link to one of the sizes of crunched by Vimeo thumbnail image, for example:
$tnLink = 'https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F' . $tnLink . '_1280x720.jpg&src1=https%3A%2F%2Ff.vimeocdn.com%2Fimages_v6%2Fshare%2Fplay_icon_overlay.png';
2020 solution:
I wrote a PHP function which uses the Vimeo Oembed API.
/**
* Get Vimeo.com video thumbnail URL
*
* Set the referer parameter if your video is domain restricted.
*
* @param int $videoid Video id
* @param URL $referer Your website domain
* @return bool/string Thumbnail URL or false if can't access the video
*/
function get_vimeo_thumbnail_url( $videoid, $referer=null ){
// if referer set, create context
$ctx = null;
if( isset($referer) ){
$ctxa = array(
'http' => array(
'header' => array("Referer: $referer\r\n"),
'request_fulluri' => true,
),
);
$ctx = stream_context_create($ctxa);
}
$resp = @file_get_contents("https://vimeo.com/api/oembed.json?url=https://vimeo.com/$videoid", False, $ctx);
$resp = json_decode($resp, true);
return $resp["thumbnail_url"]??false;
}
Usage:
echo get_vimeo_thumbnail_url("1084537");
Here is the perfect solution -
URL Example : https://vumbnail.com/226020936.jpg
URL method : https://vumbnail.com/{video_id}.jpg
It's worked for me.
It seems like an old question, but I had several projects related to Vimeo thumbnails so it was very relevant for me in the previous months. All API V2 didn't work for me, and the i.vimeocdn.com links became deprecated every month. I needed this sustainable solution , and for it I used the oEmbed API: https://developer.vimeo.com/api/oembed
Note: You will get 403 Error when trying to access from a forbidden domain. Use destination domain only or whitelist your staging/local domain.
Here is how I got images with JS:
async function getThumb (videoId) {
var url = 'https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/'+videoId+'&width=480&height=360';
try {
let res = await fetch(url);
return await res.json();
} catch (error) {
console.log(error);
}
Result variable will get a JSON from the oEmbed API.
Next, in my own use case, I needed those as a thumbnail for a videos archive. I added an ID for every thumbnail wrapper DIV, with an ID called "thumbnail-{{ID}}" (for example, "thumbnail-123456789") and inserted an image into the div.
getThumb(videoId).then(function(result) {
var img = document.createElement('img');
img.src = result.thumbnail_url;
document.getElementById('thumbnail-'+videoId).appendChild(img);
});
Related