May 9, 2008

oEmbed - Embedding third party media made easy

Web 2.0 is all about collaboration, distribution and personal configuration and probably one of the biggest traffic drivers of social networks like Facebook or MySpace are videos and photos being sent to and from your contacts.

The problem for developers of networks is that you don't want people to leave your application to see a photo or a video, which means that you need a way to only get the media and embed that. Normally this happens using the media provider's API or - if they don't offer one - screen scraping (loading the whole document and programatically finding and extracting the media).

oEmbed is a great idea to work around that issue:

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.

Flickr, Viddler, Qik, Pownce and Revision3 are the first services to support oEmbed which means you can easily access photos and videos with a simple URL.

Say for example find a nice photo on flickr:

Original URL:

oEmbed URL:

Result:

<oembed>
  <version>1.0</version>
  <type>photo</type>
  <title>? too much myspace error</title>
  <author_name>codepo8</author_name>
  <author_url>http://www.flickr.com/photos/codepo8/</author_url>
  <cache_age>3600</cache_age>
  <provider_name>Flickr</provider_name>
  <provider_url>http://www.flickr.com/</provider_url>
  <width>500</width>
  <height>375</height>
  <url>
    http://farm4.static.flickr.com/3128/2475016321_982666ec95.jpg
  </url>
</oembed>

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

oEmbed URL:

Result:

{
  version: '1.0',
  type: 'photo',
  title: '? too much myspace error',
  author_name: 'codepo8',
  author_url: 'http://www.flickr.com/photos/codepo8/',
  cache_age: '3600',
  provider_name: 'Flickr',
  provider_url: 'http://www.flickr.com/',
  width: '100',
  height: '75',
  url: 'http://farm4.static.flickr.com/3128/2475016321_982666ec95_t.jpg'
}

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

Christian Heilmann
Yahoo Developer Network

Posted at May 9, 2008 4:51 AM

Comments

Posted by: Rich at May 9, 2008 11:35 AM

Posted by: Cal at May 9, 2008 2:00 PM

Posted by: Jared Hanson at May 9, 2008 3:23 PM

Posted by: Pawel at May 13, 2008 2:42 PM

Posted by: Janet at May 22, 2008 1:10 AM

Posted by: rev at May 22, 2008 10:41 AM

Posted by: Rich at June 4, 2008 2:19 PM

Posted by: Adam Nemeth at June 10, 2008 2:21 PM