oEmbed

oEmbed is a relatively simple concept, which can be basically thought of as hyperlinking to the next level. According to oembed.com: “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.”

Today, if I want to embed this Youtube video into a WordPress blog (such as this one), I need to complete these steps:

1. Start typing my new blog post
2. Switch browser windows, and go the Youtube video’s page
3. Copy the “embed” code, which is kind of crazy looking:

   <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Pube5Aynsls&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Pube5Aynsls&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

4. Switch back to the WordPress window, and paste the embed code (as HTML) into my WordPress post

Clearly, that’s not ideal. Figuring out where the embed code is, and how to copy and paste it as HTML into WordPress is not very easy, or intuitive. Now consider a future where WordPress is an oEmbed consumer, and Youtube is an oEmbed provider. To do the same thing, these are the steps:

1. Start typing my new blog post
2. Click the “embed” button in WordPress
3. Enter the regular web browser link to the Youtube video in the box
4. Click “OK.” WordPress will automagically figure out how to embed the video, and do it for you.

No copy and paste, no tabbing between pages, and best of all, no code. The user doesn’t need to know what oEmbed is, or how it works.

oEmbed can be used in more creative ways, too. For example, if you link to a Youtube video on the microblogging site identi.ca, the link will get a little paper clip next to it, and when clicked on, the video player will open in a lightbox. For example, take a look at this notice.

At this early stage of oEmbed’s lifetime, there are not many providers or consumers. To jumpstart the process, Deepak Sarda created oohembed, a service that acts as a provider for many sites that don’t yet support oEmbed themselves (since Youtube isn’t an oEmbed provider, identi.ca uses oohembed, and that’s how the video embedding notice example works). oohembed supports a number of popular sites, such as Youtube, Vimeo, Hulu, Wikipedia, and WordPress.com.

Hopefully, we’ll see more and more sites and pieces of software support oEmbed as both providers and consumers to improve their user experience. WordPress 2.9 will likely be an oEmbed consumer (so the theoretical process I gave above may soon become a reality), and I’ve created a plugin that makes WordPress an oEmbed provider. Here’s to an easier (to embed, at least) future!

oEmbed by Craig Andrews is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.