Gadgets, widgets, flash, ActiveX, Silverlight, json, xml With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s to them?  That is exactly what oEmbed provides.  I would like to introduce you to the basics of the specification.  I hope the simplicity encourages you to support it as a provider and as a consumer when embedding resources from other providers.  Many popular sites already support it!

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.

Lets take a look at each side of a provider and consumer scenario to illustrate how oEmbed provides and elegant solution for each.

Providers must specify one or more URL scheme and API endpoint pairs. The URL scheme describes which URLs provided by the service may have an embedded representation.

The publisher must determine what scheme(s) they support in very basic format.  Typically the scheme matches URLs that consumers would browse resources at normally.  The YouTube API, for example, supports URLs matching the scheme http://*.youtube.com/watch* The API endpoint is simply an http URL at which consumers request oEmbed representations of the resources you provide.  Most of the current providers offer API endpoints with obvious URL’s like http://www.youtube.com/oembed and http://www.flickr.com/services/oembed/. Once you have the endpoint you just need to host a service there that accepts 4 specific query parameters: url : The urlencoded url that matches a supported provider defined scheme. maxwidth : (optional) The maximum width you want for embedding the resource. maxheight : (optional) The maximum height you want for embedding the resource. format: (optional) xml or json are the possible values that determine the consumers desired response Content-Type.

Requests sent to the API endpoint must be HTTP GET requests, with all arguments sent as query parameters. All arguments must be urlencoded (as per RFC 1738).

oEmbed consumers make requests for the oEmbed representation of a resource by sending a basic GET request to an API endpoint with url query parameters and any optional parameters they choose. A request to http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ results in a json response:

{
"provider_url": "http://www.youtube.com/",
"title": "Insert a YouTube Video With oEmbed Wordpress 2.9",
"html": "<object width=\"480\" height=\"295\">
    <param name=\"movie\" value=\"http://www.youtube.com/v/6lbDyXu7gUQ&fs=1\"></param>
    <param name=\"allowFullScreen\" value=\"true\"></param>
    <param name=\"allowscriptaccess\" value=\"always\"></param>
    <embed src=\"http://www.youtube.com/v/6lbDyXu7gUQ&fs=1\" type=\"application/x-shockwave-flash\"
        width=\"480\" height=\"295\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>",
"author_name": "adriarichards", "height": 295, "width": 480, "version": "1.0",
"author_url": "http://www.youtube.com/user/adriarichards",
"provider_name": "YouTube",
"type": "video"
}

Note the html property.  It contains everything you need to embed the video.  If this installation of WordPress was running version 2.9 I could paste a YouTube URL here and it would automatically get embeded as described in the video Insert a YouTube Video With oEmbed Wordpress 2.9 oEmbed supports 4 result types including video, photo, link and rich.  The rich type allows for just about any html to be returned and thus embedded.

Consumers may wish to load the HTML in an off-domain iframe to avoid XSS vulnerabilities.

To learn more and see a list of some current providers check it out at: http://oembed.com/ And for a few more implementations check out http://oohembed.com/ I look forward to hearing how you end up using oEmbed!

cory.isakson