Ajax Blog


oEmbed makes embedding third party videos and images a breeze

Posted in Ajax News by Chris Heilmann on the May 9th, 2008

Flickr, Viddler, Qik, Pownce and Revision3 are the first services to support oEmbed, an easy way to allow embeding media from a certain URL in a third party site.

From the oEmbed site:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

This means that if you for example find a nice photo on flickr, you can take the URL and easily turn it into embed-able data:

Original URL: http://flickr.com/photos/codepo8/2475016321/

oEmbed URL: http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/

Result:

HTML:
  1. <oembed>
  2.   <version>1.0</version>
  3.   <type>photo</type>
  4.   <title>? too much myspace error</title>
  5.   <author_name>codepo8</author_name>
  6.   <author_url>http://www.flickr.com/photos/codepo8/</author_url>
  7.   <cache_age>3600</cache_age>
  8.   <provider_name>Flickr</provider_name>
  9.   <provider_url>http://www.flickr.com/</provider_url>
  10.   <width>500</width>
  11.   <height>375</height>
  12.   <url>
  13.     http://farm4.static.flickr.com/3128/2475016321_982666ec95.jpg
  14.   </url>
  15. </oembed>

You can define the output format and the maximum width and height with URL parameters:

oEmbed URL:

http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/&format=json&maxwidth=200

Result:

JAVASCRIPT:
  1. {
  2.   version: '1.0',
  3.   type: 'photo',
  4.   title: '? too much myspace error',
  5.   author_name: 'codepo8',
  6.   author_url: 'http://www.flickr.com/photos/codepo8/',
  7.   cache_age: '3600',
  8.   provider_name: 'Flickr',
  9.   provider_url: 'http://www.flickr.com/',
  10.   width: '100',
  11.   height: '75',
  12.   url: 'http://farm4.static.flickr.com/3128/2475016321_982666ec95_t.jpg'
  13. }

Supported formats for responses so far are photo, video, link and rich.

Source: Ajaxian
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/286763082/oembed-makes-embedding-third-party-videos-and-images-a-breeze

Comments are closed.