Share:

When you share media from an external source and place it on your own site, it’s called embedding and it’s normally achieved with some code. HTML iFrames (inline frames) were a common way to embed content but they are usually a headache for developers. Luckily, oEmbed is the latest format for embedding and its slowly replacing static iframes. Its API allows you to share content by simply pasting the URL of any resource you want to embed without the need for code.

The oEmbed protocol

oEmbed is a specification for allowing an embedded representation of a URL on third party sites through the use of “exchanges”. An oEmbed exchange occurs between a consumer and a provider. Many content providers implement oEmbed, such as Codepen, Flickr, Vimeo, Scribd (to name a few) while LinkedIn, WordPress sites and many others  work as consumers.

A provider that implements the oEmbed API allows consumers to fetch that representation by using a predefined set of “Endpoints” (URLs that accept queries for embedded resources). The consumer is a website that wishes to show an embedded representation of a third party resource, such as a photo, a news update or an embedded video.

When querying an oEmbed URL, the provider responds with either a JSON or an XML document (it can be chosen by adding a “format” parameter to the query URL), containing information about the embedded resource, such as its width and height, its type (video, audio, etc.) and most important: the HTML code to embed the resource into a web page.

Using embedding gives websites the ability to handle and support huge amount of sites starting from Vimeo, YouTube for videos to Flickr for images to Infogram for charts to Slideshare for slide to Meetup for meetings without having to understand their formats. They simply need to display the embedding code and that’s it.

Automating  with oEmbed

Websites such as Twitter, Facebook and many others already take advantage of oEmbed by automating the display of embedded resources when you type/paste their URL addresses.

Embedding media into WordPress posts and pages has never been easier, largely because of the addition of oEmbed, which allows you to bring content like videos, images, tweets, audio and more from a different site into your own site.

This is all done by copy and pasting the URL of the content directly into the editor. Once you paste the link, WordPress will look for the actual embed code and display it on the website.

While you can also paste the static embed code, using oEmbed has the advantage of updating it automatically, so why bother? As an example, I was able to embed the YouTube video below by simply pasting its URL on the Editor.

Little trick: Using oEmbed to detect missing YouTube videos

When there’s a problem with providing a resource, providers should return HTTP status codes to indicate what caused the error. In particular, the provider should return a 404 status code when has no response for the requested URL parameter. Since YouTube supports  oEmbed, we can use this to check whether  a video actually exists by fetching the video’s oEmbed URL and see whether a 404 error occurs.

Instead of actually fetching the video’s URL using a tool suchas a cURL, we can speed things up by just checking the response headers by using PHP’s get_headers() function. The function below takes advantage of this function to fetch response headers from YouTube’s oEmbed URL for a given video and crawls through then in order to find whether a 404 header is found.

 

Share: