Embedding HTML and iframe content in the WordPress editor is annoying – the editor strips out elements so you end up with broken code, or no code at all. Right?

Wrong (sort of)!

For some reason, it seems that the vast majority of WordPress users are not aware that as of version 2.9 we can all easily embed media like YouTube videos into the editor. All you have to do is paste the URL of the page with the item you want to embed into your post (this even works in the Visual editor), and the URL will magically turn into the embedded object.

Until WordPress version 2.9, one of the sanest ways (in my opinion) to embed videos in the WordPress editor was with the Viper’s Video Quicktags plugin. You clicked an icon on the editor, pasted the URL of the page with the object to be embedded into a window, and poof! Your video was embedded properly.

Well, that very same Viper created a feature for easily embedding code in WordPress that was incorporated into WP 2.9 that allows users to embed by inserting the URL only. The functionality depends on the oEmbed format, which allows an “embedded representation of a URL on third party sites.”

Very nice, but how do I get it to work?

In order for this to work, you need to make sure your site is configured to embed media from URLs. To do this, log in to your WordPress admin and:

  1. Go to Settings > Media
  2. Under Embeds select “When possible, embed the media content from a URL directly onto the page. For example: links to Flickr and YouTube.”
  3. Save your settings.

enable-wordpress-embeds

Once that is selected, you can paste URLs from the following sites and they will yield the embedded object:

Here’s an example:

http://www.youtube.com/watch?v=z7hUBOGIXtY

Ok, that’s not really an example, since all you see is a link. The reason it remained a link is because it’s hyperlinked (i.e. if you click on it, it will take you to that page), and it’s hyperlinked because when you enter a URL in the WordPress Visual editor, it automatically converts it to a hyperlink. This is probably the reason so many WordPress users aren’t aware of the ability to embed objects by just entering the URL.

In order to make the object appear, you have to remove the hyperlink so that the link is just text. To remove the hyperlink:

  1. Put your cursor anywhere on the link.
  2. Click the broken link icon in the editor:
    wordpress-broken-link

Here’s the same link as above, with the hyperlink removed:

http://www.youtube.com/watch?v=z7hUBOGIXtY

The above works on both WordPress.com and WordPress.org sites. That’s good, but certainly not good enough. What about embedding presentations from Slideshare? Tweets from Twitter? Well, read on for how to embed objects in this easy way from many more online services, not just the ones included in WordPress out of the box.

Getting more out of oEmbed in WordPress

Luckily there are ways to add other oEmbed providers to your site so you can embed media from numerous, even hundreds of different sites by just entering a URL in the WordPress editor. The WordPress Codex explains how you can register oEmbed providers to your site’s whitelist by calling a function from a plugin or your functions.php file. Nice, but a headache.

Another way to embed media from over 200 services in your WordPress site is by installing the Embedly plugin. The plugin uses the Embedly API to get the embed code and display it in a post.

To use Embedly, install the plugin, and then click on the Embedly area in the WordPress sidebar:

embedly-sidebar

This takes you to an area that presents you with hundreds of services that you can choose to add support for in your site:

embedly-configuration

You can also see all the available services on the Embedly API page.

Embedly includes twitter, which is great. You just embed the URL of a specific tweet, and it turns it into a nice graphical format that pulls in the author’s avatar, name, and twitter background.

Here’s the URL of a tweet: http://twitter.com/#!/photomatt/status/49253618385301504. Now here it is embedded:

So much embedding potential!

So as you can see, with a few simple plugins you can change the entire way you approach adding third-party media to your site.

In the next post, we’ll look at ways to embed HTML and iframes in your WordPress site from sites that are not oEmbed providers (have you ever tried embedding a Google Form in your site? It’s scary)! So check it out to learn how to embed HTML from anything in WordPress.

More reading:

The Ultimate guide to embedding HTML and iframes in WordPress  – part 2

Official oEmbed site – learn how the format works, see examples

Embeds entry in the WordPress Codex – goes through what embeds is, what WP supports, etc.