Get img thumbnails from Vimeo?

Question

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?

Here is same question, without any answer.

Librettist

Yes, it is legal - both websites provide these details in a very public way, becuase they want you to use their content! All the embedded videos link back to the hosting site after all. – Frisby

If you want to ensure your page is not reliant on the vimeo server, and performance is optimised I suggest you do it in javascript. The downside is it will not show the thumb for users without javascript, but an appropriate placeholder with the link should be friendly enough. (change .xml to .json on your api request to vimeo) – Philous

try this answer: https://mcmap.net/q/100393/-get-id-video-vimeo-with-regexp-preg_match - makes it very easy to grab info/data about any vimeo video having only the URL. – Saracen

i.vimeocdn.com/video/528073804_200x200.webp in this way you can get video image – Corydon

@Corydon is it possible that without call the API we can get the thumbnail of vimeo video? Mean any url that we can just pass id and it will return .jpg thumbnail.When i do like this http://i.vimeocdn.com/video/201990344.webp then it will return wrong thumbnail. This is my testing video link https://vimeo.com/201990344 – Valve

@shailesh 's solution not working anymore. – Lockwood

Answer 1

From the Vimeo Simple API docs:

Making a Video Request

To get data about a specific video, use the following url:

http://vimeo.com/api/v2/video/video_id.output

video_id The ID of the video you want information for.

output Specify the output type. We currently offer JSON, PHP, and XML formats.

So getting this URL http://vimeo.com/api/v2/video/6271487.xml

    <videos> 
      <video> 
        [skipped]
        <thumbnail_small>http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_100.jpg</thumbnail_small> 
        <thumbnail_medium>http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_200.jpg</thumbnail_medium> 
        <thumbnail_large>http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_640.jpg</thumbnail_large> 
        [skipped]
    </videos>

Parse this for every video to get the thumbnail

Here's approximate code in PHP

<?php

$imgid = 6271487;

$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php"));

echo $hash[0]['thumbnail_medium'];  

Entirety

OK, nice. I'm not familiar with xml though. How can I get thumbnail_small with php? – Librettist

To get it with PHP, first use php extension in URL like vimeo.com/api/v2/video/6271487.php, you'll be provided with a file, first line of which seems to be a serialized php hash, use unserialize and then simply read the entries you want – Entirety

echo $hash[0]['thumbnail_medium']; – Entirety

Heads up Vimeo is one of those people who make good apis. Change .xml to .json. vimeo.com/api/v2/video/6271487.json – Goodill

Currently can't use ts.vimeo.com.s3.amazonaws.com or b.vimeocdn.com over SSL as they're Certs don't match the domain. – Occupational

Ha! Vimeo Simple API, what a crock. Vimeo's API is about as 'simple' as Amazon's 'Simple Monthly Calculator'. What a box of christmas lights. – Outfoot

This will not work with password protected videos, or is there anything? – Superhighway

You can also change the image size and image file type. For example, you can change the default thumbnail_large from i.vimeocdn.com/video/23566238_640.webp to i.vimeocdn.com/video/23566238_640.png or i.vimeocdn.com/video/23566238_320.jpg – Expostulatory

See github.com/vimeo/vimeo-oembed-examples/tree/master/oembed for updated js and php examples – Lovett

The API may be working, but it's deprecated and unsupported. Use at your own risk. vimeo.zendesk.com/hc/en-us/articles/… oembed is just as simple and currently supported developer.vimeo.com/api/oembed/videos – Antiquary

The XML version is not working (it's returning a response with empty values), but JSON version is: vimeo.com/api/v2/video/6271487.json – Huguenot

Answer 2

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.

Repo

Crenulate

This is what i want! – Scharff

This is awesome, thanks for sharing this! – Showpiece

A note: If you find that this does not work for your video it might be older and have a shorted ID number! Prefix it with zeros until it becomes at least 8 digits long. Example: id 123456 will not work but id 00123456 will – K

Answer 3

In javascript (uses jQuery):

function vimeoLoadingThumb(id){    
    var url = "http://vimeo.com/api/v2/video/" + id + ".json?callback=showThumb";

    var id_img = "#vimeo-" + id;

    var script = document.createElement( 'script' );
    script.src = url;

    $(id_img).before(script);
}


function showThumb(data){
    var id_img = "#vimeo-" + data[0].id;
    $(id_img).attr('src',data[0].thumbnail_medium);
}

To display it :

<img id="vimeo-{{ video.id_video }}" src="" alt="{{ video.title }}" />
<script type="text/javascript">
  vimeoLoadingThumb({{ video.id_video }});
</script>

Talbert

Thanks very much for this, very helpful. I think there is one very small typo. You use # in the id_img variables, but haven't got the # in the img element id. Does your example assume the use of jQuery as well? I swopped the $(id_img).before and $(id_img).attr for createElement and a more basic getElementById(id_img).src, but wouldn't have got it at all if it wasn't for your example. – Nitrification

The # question is the JQuery syntax not a bug. Yes it assume the use of JQuery. – Talbert

Ah, ok then. Thanks for the clarification. I don't use JQuery that often, but the answer was still really useful to me. – Nitrification

This is the testable jsfiddle for the same code: jsfiddle.net/archatas/Tv7GZ – Otalgia

anything with api/v2 is defunct – Moorland

Too bad, feel free to edit it if you've got a better way with the current APIs – Talbert

Something like developer.vimeo.com/api/playground/videos/226413193/pictures – Talbert

This did it for me, although without ?callback=showThumb I would have 0 trouble json_decode with PHP – Falcone

Answer 4

You should parse Vimeo's API's response. There is no way to it with URL calls (like dailymotion or youtube).

Here is my PHP solution:

/**
 * Gets a vimeo thumbnail url
 * @param mixed $id A vimeo id (ie. 1185346)
 * @return thumbnail's url
*/
function getVimeoThumb($id) {
    $data = file_get_contents("http://vimeo.com/api/v2/video/$id.json");
    $data = json_decode($data);
    return $data[0]->thumbnail_medium;
}

Loehr

Thank you for this. This was my favorite solution. – Jacobsen

Answer 5

Using jQuery jsonp request:

<script type="text/javascript">
    $.ajax({
        type:'GET',
        url: 'http://vimeo.com/api/v2/video/' + video_id + '.json',
        jsonp: 'callback',
        dataType: 'jsonp',
        success: function(data){
            var thumbnail_src = data[0].thumbnail_large;
            $('#thumb_wrapper').append('<img src="' + thumbnail_src + '"/>');
        }
    });
</script>

<div id="thumb_wrapper"></div>

Corrinnecorrival

I'd like to use this ... but what if I have multiple videos on a page? Any way to pass the id to the call? Ideally I'd like to use something like <div id='12345678' class='vimeo_thumb'></div> -- and that would get filled with the thumbnail img. – Poach

The method call can be shortened like $.getJSON('http://vimeo.com/api/v2/video/' + video_id + '.json?callback=?', function (data) {... – Shriek

Does this method still work? We are having issues with this in 2021. see https://mcmap.net/q/100394/-vimeo-api-jsonp-issue – Cryogen

@willC No. Use oEmbed API. – Lockwood

Answer 6

With Ruby, you can do the following if you have, say:

url                      = "http://www.vimeo.com/7592893"
vimeo_video_id           = url.scan(/vimeo.com\/(\d+)\/?/).flatten.to_s               # extract the video id
vimeo_video_json_url     = "http://vimeo.com/api/v2/video/%s.json" % vimeo_video_id   # API call

# Parse the JSON and extract the thumbnail_large url
thumbnail_image_location = JSON.parse(open(vimeo_video_json_url).read).first['thumbnail_large'] rescue nil

Marcin

Note: you might need to require 'open-uri' to allow open to parse URI's as well as files. – Winter

I had to add url.scan(/vimeo.com\/(\d+)\/?/).flatten.to_s.delete("^0-9.") to get the vimeo ID # – Nestor

require "open-uri" require 'json' thumbnail_image_location = JSON.parse(URI.open("vimeo.com/api/v2/video/… – Librettist

Answer 7

Here is an example of how to do the same thing in ASP.NET using C#. Feel free to use a different error catch image :)

public string GetVimeoPreviewImage(string vimeoURL)
{
    try
    {
        string vimeoUrl = System.Web.HttpContext.Current.Server.HtmlEncode(vimeoURL);
        int pos = vimeoUrl.LastIndexOf(".com");
        string videoID = vimeoUrl.Substring(pos + 4, 8);

        XmlDocument doc = new XmlDocument();
        doc.Load("http://vimeo.com/api/v2/video/" + videoID + ".xml");
        XmlElement root = doc.DocumentElement;
        string vimeoThumb = root.FirstChild.SelectSingleNode("thumbnail_medium").ChildNodes[0].Value;
        string imageURL = vimeoThumb;
        return imageURL;
    }
    catch
    {
        //cat with cheese on it's face fail
        return "http://bestofepicfail.com/wp-content/uploads/2008/08/cheese_fail.jpg";
    }
}

NOTE: Your API request should like this when requested: http://vimeo.com/api/v2/video/32660708.xml

Darrow

Nice, but the API link is only vimeo.com/api/v2/video/video_id.xml not "video" in front of the video ID. – Subaquatic

Shortened this code down, and changed the param to accept a vimeo id instead of the full URL. (can't figure out how to multiline the code block) public static string GetVimeoPreviewImage(string id) { try { XmlDocument doc = new XmlDocument(); doc.Load("http://vimeo.com/api/v2/video/" + id + ".xml"); return doc.DocumentElement.FirstChild.SelectSingleNode("thumbnail_medium").ChildNodes[0].Value; } catch { return string.Empty; } } – Choroid

Answer 8

The easiest JavaScript way that I found to get the thumbnail, without searching for the video id is using:

//Get the video thumbnail via Ajax
$.ajax({
    type:'GET',
    url: 'https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
        console.log(data.thumbnail_url);
    }
});

Note: If someone need to get the video thumbnail related to the video id he can replace the $id with the video id and get an XML with the video details:

http://vimeo.com/api/v2/video/$id.xml

Example:

http://vimeo.com/api/v2/video/198340486.xml

Source

Baum

This is really the best answer since Vimeo deprecated the v2 api. oEmbed does not require authentication and returns a JSON/XML response containing thumbnail urls. developer.vimeo.com/apis/oembed – Commensurate

Roy how do we use this ajax call when looking for a specific video by ID? – Ballade

@blackhawk I do not, but I google it now and found something for you, just replace the video_id with your $id and you will get an XML with the video details (include thumbnails). http://vimeo.com/api/v2/video/$id.xml. for example: http://vimeo.com/api/v2/video/198340486.xml. Source is here: coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video – Baum

@blackhawk I edit my answer, you can see it now. Thanks! – Baum

Answer 9

If you would like to use thumbnail through pure js/jquery no api, you can use this tool to capture a frame from the video and voila! Insert url thumb in which ever source you like.

Here is a code pen :

http://codepen.io/alphalink/pen/epwZpJ

<img src="https://i.vimeocdn.com/video/531141496_640.jpg"` alt="" />

Here is the site to get thumbnail:

http://video.depone.eu/

Wildon

@blackhawk site is back up. – Wildon

Looks like this gets a random frame, not the official cover/thumbnail the video creator has selected. Great to know this exists, but I think I'll use the API json parse method because there's no control of the cover art from the vimeo side of things with this. – Caw

Answer 10

I created a CodePen that fetches the images for you.

https://codepen.io/isramv/pen/gOpabXg

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);
  }
});

Viewy

Answer 11

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,

Beutner

I just tried it with vimeo.com/api/v2/video/193641463.php , i.vimeocdn.com/video/605393384_640.jpg , i.vimeocdn.com/video/605393384_2000.jpg and it does work. Cheers, – Beutner

Answer 12

Using the Vimeo url(https://player.vimeo.com/video/30572181), here is my example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <title>Vimeo</title>
</head>
<body>
    <div>
        <img src="" id="thumbImg">
    </div>
    <script>
        $(document).ready(function () {
            var vimeoVideoUrl = 'https://player.vimeo.com/video/30572181';
            var match = /vimeo.*\/(\d+)/i.exec(vimeoVideoUrl);
            if (match) {
                var vimeoVideoID = match[1];
                $.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', { format: "json" }, function (data) {
                    featuredImg = data[0].thumbnail_large;
                    $('#thumbImg').attr("src", featuredImg);
                });
            }
        });
    </script>
</body>
</html>

Keheley

You are the best. – Markley

Answer 13

It seems like api/v2 is dead.
In order to use the new API, you need to register your application, and base64 encode the client_id and client_secret as an Authorization header.

$.ajax({
    type:'GET',
    url: 'https://api.vimeo.com/videos/' + video_id,
    dataType: 'json',
    headers: {
        'Authorization': 'Basic ' + window.btoa(client_id + ":" + client_secret);
    },
    success: function(data) {
        var thumbnail_src = data.pictures.sizes[2].link;
        $('#thumbImg').attr('src', thumbnail_src);
    }
});

For security, you can return the client_id and client_secret already encoded from the server.

Packer

base64 is not a hash. There is nothing more "secure" about base64-encoding your data on the server over encoding it on the client side. That said, it likely is somewhat faster. – Coenosarc

Answer 14

function parseVideo(url) {
    // - Supported YouTube URL formats:
    //   - http://www.youtube.com/watch?v=My2FRPA3Gf8
    //   - http://youtu.be/My2FRPA3Gf8
    //   - https://youtube.googleapis.com/v/My2FRPA3Gf8
    // - Supported Vimeo URL formats:
    //   - http://vimeo.com/25451551
    //   - http://player.vimeo.com/video/25451551
    // - Also supports relative URLs:
    //   - //player.vimeo.com/video/25451551

    url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);

    if (RegExp.$3.indexOf('youtu') > -1) {
        var type = 'youtube';
    } else if (RegExp.$3.indexOf('vimeo') > -1) {
        var type = 'vimeo';
    }

    return {
        type: type,
        id: RegExp.$6
    };
}

function getVideoThumbnail(url, cb) {
    var videoObj = parseVideo(url);
    if (videoObj.type == 'youtube') {
        cb('//img.youtube.com/vi/' + videoObj.id + '/maxresdefault.jpg');
    } else if (videoObj.type == 'vimeo') {
        $.get('http://vimeo.com/api/v2/video/' + videoObj.id + '.json', function(data) {
            cb(data[0].thumbnail_large);
        });
    }
}

Lexington

Answer 15

Decomposing Karthikeyan P's answer so it can be used in a wider array of scenarios:

// Requires jQuery

function parseVimeoIdFromUrl(vimeoUrl) {
  var match = /vimeo.*\/(\d+)/i.exec(vimeoUrl);
  if (match)
    return match[1];

  return null;
};

function getVimeoThumbUrl(vimeoId) {
  var deferred = $.Deferred();
  $.ajax(
    '//www.vimeo.com/api/v2/video/' + vimeoId + '.json',
    {
        dataType: 'jsonp',
        cache: true
    }
  )
  .done(function (data) {
    // .thumbnail_small 100x75
    // .thumbnail_medium 200x150
    // 640 wide
        var img = data[0].thumbnail_large;
        deferred.resolve(img);  
    })
  .fail(function(a, b, c) {
    deferred.reject(a, b, c);
  });
  return deferred;
};

Usage

Get a Vimeo Id from a Vimeo video URL:

var vimeoId = parseVimeoIdFromUrl(vimeoUrl);

Get a vimeo thumbnail URL from a Vimeo Id:

getVimeoThumbUrl(vimeoIds[0])
.done(function(img) {
    $('div').append('<img src="' + img + '"/>');
});

https://jsfiddle.net/b9chris/nm8L8cc8/1/

Whizbang

Answer 16

Actually the guy who asked that question posted his own answer.

"Vimeo seem to want me to make a HTTP request, and extract the thumbnail URL from the XML they return..."

The Vimeo API docs are here: http://vimeo.com/api/docs/simple-api

In short, your app needs to make a GET request to an URL like the following:

http://vimeo.com/api/v2/video/video_id.output

and parse the returned data to get the thumbnail URL that you require, then download the file at that URL.

Harbour

Answer 17

I wrote a function in PHP to let me to this, I hope its useful to someone. The path to the thumbnail is contained within a link tag on the video page. This seems to do the trick for me.

    $video_url = "http://vimeo.com/7811853"  
    $file = fopen($video_url, "r");
    $filedata = stream_get_contents($file);
    $html_content = strpos($filedata,"<link rel=\"videothumbnail");
    $link_string = substr($filedata, $html_content, 128);
    $video_id_array = explode("\"", $link_string);
    $thumbnail_url = $video_id_array[3];
    echo $thumbnail_url;

Hope it helps anyone.

Foggson

Latrinalatrine

Answer 18

function getVimeoInfo($link)
 {
    if (preg_match('~^http://(?:www\.)?vimeo\.com/(?:clip:)?(\d+)~', $link, $match)) 
    {
        $id = $match[1];
    }
    else
    {
        $id = substr($link,10,strlen($link));
    }

    if (!function_exists('curl_init')) die('CURL is not installed!');
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "http://vimeo.com/api/v2/video/$id.php");
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 10);
    $output = unserialize(curl_exec($ch));
    $output = $output[0];
    curl_close($ch);
    return $output;
}`

//at below function pass the thumbnail url.

function save_image_local($thumbnail_url)
    {

         //for save image at local server
         $filename = time().'_hbk.jpg';
         $fullpath = '../../app/webroot/img/videos/image/'.$filename;

         file_put_contents ($fullpath,file_get_contents($thumbnail_url));

        return $filename;
    }

Morbihan

Answer 19

If you don't need an automated solution, you can find the thumbnail URL by entering the vimeo ID here: http://video.depone.eu/

Ventricular

There is another answer just like this on this page above. – Wildon

Answer 20

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';

Heall

Please can you help me with any official announcement link where it is mentioned that v2 vimeo is deprecated. – Heather

Answer 21

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");

Vehicle

Answer 22

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);
});

Lockwood

Answer 23

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.

Nympha

Answer 24

You might want to take a look at the gem from Matt Hooks. https://github.com/matthooks/vimeo

It provides a simple vimeo wrapper for the api.

All you would need is to store the video_id (and the provider if you are also doing other video sites)

You can extract the vimeo video id like so

def 
  get_vimeo_video_id (link)
        vimeo_video_id = nil
        vimeo_regex  = /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/
        vimeo_match = vimeo_regex.match(link)


if vimeo_match.nil?
  vimeo_regex  = /http:\/\/player.vimeo.com\/video\/([a-z0-9-]+)/
  vimeo_match = vimeo_regex.match(link)
end

    vimeo_video_id = vimeo_match[2] unless vimeo_match.nil?
    return vimeo_video_id
  end

and if you need you tube you might find this usefull

def
 get_youtube_video_id (link)
    youtube_video_id = nil
    youtube_regex  = /^(https?:\/\/)?(www\.)?youtu.be\/([A-Za-z0-9._%-]*)(\&\S+)?/
    youtube_match = youtube_regex.match(link)

if youtube_match.nil?
  youtubecom_regex  = /^(https?:\/\/)?(www\.)?youtube.com\/watch\?v=([A-Za-z0-9._%-]*)(\&\S+)?/
  youtube_match = youtubecom_regex.match(link)
end

youtube_video_id = youtube_match[3] unless youtube_match.nil?
return youtube_video_id
end

Roslyn

Answer 25

If you are looking for an alternative solution and can manage the vimeo account there is another way, you simply add every video you want to show into an album and then use the API to request the album details - it then shows all the thumbnails and links. It's not ideal but might help.

API end point (playground)

Twitter convo with @vimeoapi

Chosen

This is perhaps not the most efficient way to go about it, especially if (1) the rest of your code does not depend on the Vimeo API, and (2) you have a good feeling that your API calls may go beyond what Vimeo has set as a limit. – Ballade

@blackhawk you missed my point. It's alternative. If you do this you have all your videos in a single API call. You can cache that server side for example. – Chosen

Answer 26

For somebody like me who's trying to figure this out recently,

https://i.vimeocdn.com/video/[video_id]_[dimension].webp works for me.

(where dimension = 200x150 | 640)

Gowan

Nice find. This is really clean. – Phalangeal

Great except safari on iOS doesn't display the webp – Shuler

This seems to be wrong - I get a picture that has nothing to do with the actual video. The id used in the thumb url are different from the video id - if you call the api you will get this url with different ids. There is no shortcut from calling the api. – Considered

That does not work, the video_id and image_id are not the same. So you will get an image that does not belong to the video you have requested – Gyrfalcon

The video Id and Id in thumbnail is different – Exude