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

User · Answer

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

User · Answer

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

User · Answer

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    gt  array                   header    gt  array  quot Referer   referer r n quot                     request fulluri    gt  true                                     ctx   stream context create  ctxa               resp    file get contents  quot https   vimeo com api oembed json url https   vimeo com  videoid quot   False   ctx        resp   json decode  resp  true    return  resp  quot thumbnail url quot    false     Usage  echo get vimeo thumbnail url  quot 1084537 quot

User · Answer

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

User · Answer

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    lt img src  https   i vimeocdn com video 531141496 640 jpg   alt      gt    Here is the site to get thumbnail   http   video depone eu

User · Answer

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   -      amp  S            if  RegExp  3 indexOf  youtu    gt  -1            var type    youtube         else if  RegExp  3 indexOf  vimeo    gt  -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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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     lt img id  vimeo-   video id video     src    alt     video title       gt   lt script type  text javascript  gt    vimeoLoadingThumb    video id video       lt  script gt

User · Answer

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

User · Answer

Using the Vimeo url https   player vimeo com video 30572181   here is my example   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  xmlns  http   www w3 org 1999 xhtml  gt  x000D   lt head gt  x000D       lt meta charset  utf-8    gt  x000D       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D       lt script src  http   code jquery com jquery-latest min js  type  text javascript  gt  lt  script gt  x000D       lt title gt Vimeo lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt div gt  x000D           lt img src    id  thumbImg  gt  x000D       lt  div gt  x000D       lt script gt  x000D            document  ready function      x000D              var vimeoVideoUrl    https   player vimeo com video 30572181   x000D              var match    vimeo      d   i exec vimeoVideoUrl   x000D              if  match    x000D                  var vimeoVideoID   match 1   x000D                    getJSON  http   www vimeo com api v2 video     vimeoVideoID     json callback       format   json     function  data    x000D                      featuredImg   data 0  thumbnail large  x000D                          thumbImg   attr  src   featuredImg   x000D                      x000D                x000D              x000D       lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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 - gt thumbnail medium

User · Answer

I created a CodePen that fetches the images for you      https   codepen io isramv pen gOpabXg   HTML   lt input type  text  id  vimeoid  placeholder  257314493  value  257314493  gt   lt button id  getVideo  gt Get Video lt  button gt   lt div id  output  gt  lt  div gt    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   gt        return response text            then data   gt        const   thumbnail large  thumbnail medium  thumbnail small     JSON parse data  0       const small     lt img src    thumbnail small    gt        const medium     lt img src    thumbnail medium    gt        const large     lt img src    thumbnail large    gt        output innerHTML   small   medium   large          catch error   gt        console log error            getVideo addEventListener  click   e   gt      if   isNaN videoIdInput value         getVideoThumbnails videoIdInput value

User · Answer

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

User · Answer

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   -      amp  S         youtube match   youtube regex match link   if youtube match nil    youtubecom regex       https         www    youtube com  watch  v   A-Za-z0-9   -      amp  S       youtube match   youtubecom regex match link  end  youtube video id   youtube match 3  unless youtube match nil  return youtube video id end

User · Answer

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

User · Answer

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

User · Answer

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       lt videos gt          lt video gt            skipped           lt thumbnail small gt http   ts vimeo com s3 amazonaws com 235 662 23566238 100 jpg lt  thumbnail small gt            lt thumbnail medium gt http   ts vimeo com s3 amazonaws com 235 662 23566238 200 jpg lt  thumbnail medium gt            lt thumbnail large gt http   ts vimeo com s3 amazonaws com 235 662 23566238 640 jpg lt  thumbnail large gt            skipped       lt  videos gt    Parse this for every video to get the thumbnail  Here s approximate code in PHP   lt  php   imgid   6271487    hash   unserialize file get contents  http   vimeo com api v2 video  imgid php      echo  hash 0   thumbnail medium

User · Answer

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   x000D   x000D  Simple Image Example   lt img src  https   vumbnail com 358629078 jpg    gt     lt br gt   lt br gt    Modern Responsive Image Example   lt img srcset  https   vumbnail com 358629078 jpg 640w  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    gt  x000D   x000D   x000D   If you want to spin up your own you can do so here  Repo

User · Answer

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   lt img src      img       gt           https   jsfiddle net b9chris nm8L8cc8 1

User · Answer

Using jQuery jsonp request    lt script type  text javascript  gt        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   lt img src      thumbnail src       gt                        lt  script gt    lt div id  thumb wrapper  gt  lt  div gt

User · Answer

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  - gt 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 amp src1 https 3A 2F 2Ff vimeocdn com 2Fimages v6 2Fshare 2Fplay icon overlay png

[html] Get img thumbnails from Vimeo?

Examples related to html

Examples related to thumbnails

Examples related to vimeo