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.

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

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

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>

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

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>

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

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

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

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/

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

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,

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>

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.

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

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/

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.

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

Answer 18

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

Answer 19

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

Answer 20

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

Answer 21

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

Answer 22

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.

Answer 23

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

Answer 24

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

Answer 25

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

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)