Video Posts with Auto Thumbnail(Like in Facebook) in Tumblr.com

Question

I'd like to find out how Tumblr retrieves video thumbnails.

Normal video posts (not using API) when viewed from the dashboard or /tagged/ filters, some sites's video shows thumbnails, some doesn't show up.

Works for http://www.youtube.com and http://www.vimeo.com.

However, http://www.ted.com and http://www.slideshare.net thumbnails doesn't show up.

I was wondering if any of the Tumblr devs can enlighten me on the process how and where they get the thumbnail data from. Is there a general method for retrieval that by that I can conform a document structure to?

It would also be great if the API allows you to set thumbnail url too, sort of like facebook's opengraph image meta data.

Whey

Answer 1

Hi mikedidthis have write accurately..

As per tumbler's image thumbnail api, tumbler do not provide any inbuilt function like facebook to retrieve images like in facebook or youtube.

Please see this documentation:

http://www.tumblr.com/docs/en/custom_themes

Gigolo

Answer 2

Tumblr Video Thumbnails

My understanding of {VideoThumbnailURL} is as follows:

This variable will include any related thumbnails to a video, served directly from the provider of the video.

Tumblr itself isn't generating the thumbnails. Below is the returned URL from a test, using {VideoThumbnailURL} and the video: http://www.youtube.com/watch?v=i0y4G1tNb1M

http://img.youtube.com/vi/i0y4G1tNb1M/hqdefault.jpg

To answer your question, the provider of the video would have to generate the thumbnails and Tumblr would need to support / integrate these on the Dashboard.

Easy way to test if a provider is supported, create a video post and add your embed code. If the message preview not available appears, the provider doesn't support thumbnails and / or Tumblr doesn't support this provider.

Providers with Thumbnail Support

http://blip.tv/

http://www.dailymotion.com/

http://www.metacafe.com/

http://www.youtube.com

http://www.vimeo.com

Providers without Thumbnail Support

https://vine.co

http://www.ted.com

http://www.slideshare.net

http://www.veoh.com/

http://www.twitch.tv/

Philter

If I am a provider, how can I go about adding Thumbnail support? What do I need to add? – Sladen

@Sladen sadly I have no idea. Maybe contact Tumblr directly? – Philter

Answer 3

You must use Fully SSL iframes and never display intrusive or invasive ads/popups in the video (safer to serve NO ADS/POPUPS, or you may be blocked from loading inline permanently).

You must be desktop and mobile compatible, and declare meta tags such as the thumbnail and the url to load the video using various methods (study the iframe content of those who already load inline, ex: og:video).

WHY: Since Tumblr uses SSL in the dashboard and on many blogs, all iframes or videos must be SSL too. If you load any non-ssl content (HTTP), on a page that is using SSL (HTTPS), the content will not load, and usually just appears blank, or incomplete. This is why tumblr links in a new window, when videos aren't being pull from a URL that provides full ssl video embeds.

Using a subdomain that forces ssl, and deals with content that isn't SSL (your own pop open window), will allow your site to load inline with the Tumblr Dashboard.

If you fail to be fully compliant and Tumblr will revoke any future inline videos from your URL. That's why it would be good to load videos from a subdomain that forces ssl only, and redirects non ssl to the ssl page.

Distend