oEmbed is an open format that allows website publishers to fetch third party content with a URI and embed it on their websites. This content could be images, videos, documents, or any rich content type. Oembed provides a standard to rich media publishers to share their content across the web, making it easier to fetch the content and embed it on websites. Some of the most popular content sharing websites such as YouTube, Flickr, Hulu, Vimeo, and SlideShare support oEmbed.
WordPress started supporting oEmbed since 2.9 to make content sharing easier. Now users can just paste the URL of a youtube video (or any supported website) and WordPress automatically embeds the content.
How oEmbed Works?
The reason behind oEmbed is to provide a standard solution for embedded content sharing. So when you paste the link to an oEmbed enabled provider in your WordPress or any oEmbed enabled supporting publishing platform, it will then look for an oEmbed header on the provider url. Finding the oEmbed header it then sends a standardize query to that website. This query then returns an standardized and structured response. This response is then used to display the content on your platform.
We want to embed this video on our website. It is hosted on YouTube, and if you look at the source code of the video page you will find these lines:
<link rel="alternate" type="application/json+oembed" href="http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DpFDoCLf96Kg&amp;format=json" title="Rebecca MacKinnon: Let’s take back the Internet!">
<link rel="alternate" type="text/xml+oembed" href="http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DpFDoCLf96Kg&amp;format=xml" title="Rebecca MacKinnon: Let’s take back the Internet!">
These lines make the primary embeddable content on the web page discoverable. The first line provides a link to JSON response and the second line to XML response.
If your publishing platform supports oEmbed it will then look up at those URLs and will get a response from one of these links which will be something like this:
"title": "Rebecca MacKinnon: Let’s take back the Internet!",
"html": "\u003ciframe width=\"480\" height=\"270\" src=\"http:\/\/www.youtube.com\/embed\/pFDoCLf96Kg?fs=1\u0026feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
<title>Rebecca MacKinnon: Let’s take back the Internet!</title>
<iframe width="480" height="270" src="http://www.youtube.com/embed/pFDoCLf96Kg?fs=1&feature=oembed" frameborder="0" allowfullscreen></iframe>
Now this is structured data that provides all necessary information you need to embed the content on your website.
oEmbed in WordPress
WordPress supports oEmbed but not all oEmbed providers are supported by default. The functionality is there but it will be a security loop hole to let any url with discoverable oEmbed content to allow embedding content on user websites. To protect from this, WordPress has an internal whitelist of sites that are automatically enabled for embeds. At the time of writing this article these oEmbed providers are supported by default:
The list is maintained in
wp-includes->class-oembed.php (Do not Edit this file). However, you can add more oEmbed providers using the function
Adding SlideShare as oEmbed Provider to WordPress
SlideShare is one of the popular websites that supports oEmbed and is not part of the WordPress oEmbed whitelist. So if you add a lot of SlideShare content to your website you may want to make embedding easier. To do that we are going to add SlideShare as an oEmbed provider to our WordPress.
We will be using
wp_oembed_add_provider() function. This function has three arguments
wp_oembed_add_provider( $format, $provider, $regex );
$format is a required argument it tells WordPress what kind of URL scheme the provider follows.
$provider is also required, it is the base URL of the provider where there query will be directed to.
$regex an optional argument which tells WordPress that the URL scheme format is a regex string (True) or a simple wildcard scheme (False), default is false.
To add SlideShare as an oEmbed provider we add the following code to our theme’s
wp_oembed_add_provider( ‘http://www.slideshare.net/*/*’, ‘http://www.slideshare.net/api/oembed/2’ );
We got the URL scheme and base URL from official oEmbed website. If a provider is not listed in the oEmbed providers list, it does not mean that it cannot benefit from oEmbed. Most providers have an oEmbed api page on their website describing all you need to know to benefit from these features.
Now to embed a slide from SlideShare all you have to do is to copy the URL from the address bar and paste it into post edit area.
Adding Instagram Embeds to WordPress
Just to get our hands a little better on this lets add another popular oEmbed provider to our WordPress powered site. This time we are adding Instagram. Here is the code:
wp_oembed_add_provider( ‘http://instagr.am/*/*’, ‘http://api.instagram.com/oembed’ );
wp_oembed_add_provider( ‘http://www.instagram.com/*/*’, ‘http://api.instagram.com/oembed’ );
Note that we have added both instagram.com and instagr.am as different providers to make sure that shortened and non-shortened both URLs work fine.
Embedly Plugin to Embed Content from More Sources
Embedly provides easy embed solutions to providers as well as web publishers. They have a free WordPress plugin that allows you to embed content from more than 200 sources by just pasting the URL. It supports sites such as Tumblr, Wikipedia, deviantart, twitpic, etc.
I feel that it is safe to use Embedly, instead of manually adding individual oEmbed and non-oEmbed providers. I tried testing embedly with default WordPress theme TwentlyEleven by pasting URLs for some popular content providers. The results were statisfactory, I guess the major concern for most publishers would be to have the embeds fit in their content and not look ugly.
Sharing has become an important aspect of how people interact on the web. As a web publisher, I myself feel obligated to provide easy content sharing solutions to the visitors of my website as well as authors. oEmbed makes this easier for me. But while writing this post I asked myself, do most WordPress users know that they don’t need embed code for some providers? I think, apart from Youtube, common WordPress user does not know which providers are supported.