oEmbed Tutorial: It’s How Websites Share Content

What Is oEmbed:

oEmbed is a type of API that many websites have (see list below) to allow you to retrieve content from them by specifying a URL.

Why You Would Need oEmbed:

Let’s say want to make a website were a user can provide his favorite YouTube video for others to see and you want all the video’s information to be displayed somewhere in the user’s profile page and embed the video itself.

One way would be to ask for the full URL, scrape the meta tags and use the URL and place it inside YouTube’s video tag.

The best way however, would be to ask YouTube to have all this ready for you, this is what oEmbed is all about.

How To Use oEmbed: It’s Easy!

Going back to our favorite video example, let’s say that a user’s favorite video was this one.

http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=5--5zpVEWOM

All you need to do now is append the URL to YouTube’s oEmbed API endpoint

http://www.youtube.com/oembed?url=video_url&format=format

The format can be either XML or JSON. If you use JSON you would get this response for our URL.

{
	"provider_url": "http://www.youtube.com/", 
	"title": "Communist Roll'd", 
	"html": "<object width=\"480\" height=\"295\"><param name=\"movie\" value=\"http://www.youtube.com/v/5--5zpVEWOM&fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/5--5zpVEWOM&fs=1\" type=\"application/x-shockwave-flash\" width=\"480\" height=\"295\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>", 
	"author_name": "RayWilliamJohnson", 
	"height": 295, 
	"width": 480, 
	"version": "1.0", 
	"author_url": "http://www.youtube.com/user/RayWilliamJohnson", 
	"provider_name": "YouTube",
	"type": "video"
}

Now you can use your favorite language to parse this reponse.

Check out my tutorials for parsing XML with PHP and parsing JSON With PHP.

Some oEmbed Providers:

  • YouTube
    • API endpoint: http://www.youtube.com/oembed
    • Example: http://www.youtube.com/oembed?url=video_url&format=xml_or_json
  • Flickr
    • Docs: http://developer.yahoo.net/blog/archives/2008/05/oembed_embeddin.html
    • API endpoint: http://www.flickr.com/services/oembed/
    • Example: http://flickr.com/services/oembed?url=photo_url
  • Viddler
    • API endpoint: http://lab.viddler.com/services/oembed/
    • Docs: http://wiki.developers.viddler.com/index.php/OEMBED
    • Example: http://lab.viddler.com/services/oembed/?url=video_url
  • Revision3
    • API endpoint: http://revision3.com/api/oembed/
    • Example: http://revision3.com/api/oembed/?url=video_url&format=xml
  • Hulu
    • API endpoint: http://www.hulu.com/api/oembed.{format}
    • Example: http://www.hulu.com/api/oembed.format?url=video_url
  • Vimeo
    • Docs: http://vimeo.com/api/docs/oembed
    • API endpoint: http://www.vimeo.com/api/oembed.{format}
    • Example: http://www.vimeo.com/api/oembed.format?url=video_url