oEmbed – 3rd Party Content (Video/Pictures/…) embedded on your own side

To embed content from other sides like YouTube, Flickr, Slideshare seems to be very difficult at the first sight especially if you want to make it “automatically” from the URL. How the embedding works depends on the content – on YouTube and so on you need a video player for Slideshare and so on you need Flash/JS for the presentations. But there is a standard for exact this case: oEmbed.

Aims of oEmbed

oEmbed is used to be a standard surface to embed content from other sides on your own side. There are some important names supporting oEmbed like YouTube or Flickr:

Example Flickr:

The client calls this URL:

http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/

And receives this answer:

{
	"version": "1.0",
	"type": "photo",
	"width": 240,
	"height": 160,
	"title": "ZB8T0193",
	"url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
	"author_name": "Bees",
	"author_url": "http://www.flickr.com/photos/bees/",
	"provider_name": "Flickr",
	"provider_url": "http://www.flickr.com/"
}

Example YouTube:

Call:

http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json

Answer:

{
	"version": "1.0",
	"type": "video",
	"provider_name": "YouTube",
	"provider_url": "http://youtube.com/",
	"width": 425,
	"height": 344,
	"title": "Amazing Nintendo Facts",
	"author_name": "ZackScott",
	"author_url": "http://www.youtube.com/user/ZackScott",
	"html":
		"<object width=\"425\" height=\"344\">
			<param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param>
			<param name=\"allowFullScreen\" value=\"true\"></param>
			<param name=\"allowscriptaccess\" value=\"always\"></param>
			<embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"
				type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
				allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
		</object>",
}

Especially on YouTube the Idea works: In the HTML Property you will find the whole code do embed the YouTube player.

oEmbed Answers

According to the Standard the answer will be XML or JSON but at the moment JSON is the more in use. YouTube supports both.

jQuery oEmbed library

There is also a jQuery library to call this service. For this they use JSONP.

Embed.ly – oEmbed Hub

Because of oEmbed the format is fixed but anyway you need to question numerous Providers to get to know the URLS. With the service embed.ly you can access to a kind of “Hub”. Embeded.ly provides a oEmbed endpoint and you can send almost every kind of address to emebd.ly and you will receive a fitting answer.

Embed.ly could be called easily with the jQuery Plugin.

Embedy.ly – costs

There is a rub with embed.ly – it’s not for free. But there is a Account-Type for free (scroll to the bottom!). With this Account you are allowed to make 10.000 calls every month. Afterwards the prices are graded.

Who could be interested in embed.ly or oEmbed?

The most important usage is for “link-sharing” sites like Digg.com and so on but you get some meta-information from the URL so you don’t need a complex connection to API.

Try it on embed.ly

Embed.ly offers a “Test-Client” to get a feeling for the results you can await.

About the author

Written by Code Inside Team

Learn more about our team.