As promised in my previous post on WordPress 2.9 features, this post will be a demonstration of the super easy media embeds coming in WordPress 2.9. What I find particularly interesting and useful about the new embedding feature, and oEmbed in particular, is that it is truly multimedia. It’s not just about embedding videos. You can embed images, audio, slideshows, or even HTML. Anything that could possibly be included in a web page can be embedded from a remote service via oEmbed.

What’s great about the new media embed feature in WordPress is that it’s so easy to use. How easy? Really easy.
There are two ways to use the new media embedding feature in WordPress 2.9 — raw URLs or the embed shortcode. The first is the simplest — simply include the URL to a page on a supported service on a line all by itself in your post. For our examples, we’ll include a static image from Flickr:

Note that this link points to a full web page, not just an image. But with the oEmbed support, WordPress will be able to find out what it needs to fetch, and how to embed it properly in your content. When the post is rendered in the browser, the image will be fetched in place of the URL:

Note that even though the URL pointed to the ‘small’ version of the image, the embed gave us the ‘medium’ size instead. This is what Flickr considers the ‘canonical’ version of the image. That might be something to keep in mind. Other services might detect which version of a resource you are embedding and serve up an appropriate version, or Flickr may change this behavior in the future. The important thing here is that all we did was put the URL on a line by itself in our post, and WordPress magically figured out what to do.

Using the embed shortcode is just about as easy. Simply wrap the shortcode around the URL:

That worked exactly like the first example, huh? So, if it’s so easy to embed something using a raw URL, why use the embed shortcode? Because it allows parameters! Let’s say you want to put that picture in your post, but you need it to be a particular size, so that it fits into your theme layout better. Simply specify the size inside the opening embed shortcode.

Another advantage of the shortcode is that you can wrap other HTML around it. For example, on this site, I sometimes put an image inside a div with a class of pull-quote, which results in a highlighted section which floats to the right of the surrounding text (you have to switch from the Visual editor to the HTML editor for this). The code would typically look something like this:

So there you go, a quick example of how to use the new embed features in WordPress 2.9. I was going to mix things up with embeds from different sites, but not all of the oEmbed services listed were working right for me. I might need to do some testing and file some bug reports later.

Like this:

About Dougal Campbell

Dougal is a web developer, and a "Developer Emeritus" for the WordPress platform. When he's not coding PHP, Perl, CSS, JavaScript, or whatnot, he spends time with his wife, three children, a dog, and a cat in their Atlanta area home.

Yeah, but it doesn’t actually save the cached file for Apache to pick up. I think it’s because I run WP out of a subdirectory (‘wordpress’), and have a custom permalink structure that’s different (‘blog’). Need to do more testing to be sure, though. I just know that it didn’t create the static file that it was supposed to.

Does this work in the HTML, non-visual editor? One of the first things I do with new WP installs is disable the rich editor, maybe that’s just me? I used VideoPress which had a similar embed styles (used [video] i believe) and that didn’t seem to work with my setup.

Does it contact the third-party server on display, too, or does it grab it once (say on post update) and store the resulting HTML code locally?

If it contacts the third-party server every time someone views the post, that sounds like a very bad case of overhead, doubling the number of requests sent to (for instance) Flickr and making the page itself dependent on a third party server to load within a reasonable time period.

I’m guessing that since no one above said anything about the page not loading, just about images being missing, during the time that Flickr was down, it probably means this pulls the oEmbed data once and stores it. Though I suppose that could have been Super Cache.

Yeah, I had to use the HTML (code) editor for this post, because the Visual editor kept wanting to translate the HTML entities I needed to use to make my code examples display properly. And the trick I’m using to keep the embed tags from being interpreted doesn’t work right in Safari (a soft-hyphen).

Thanks for the great work ! I just started to use this feature and am loving it.

However, just a couple of questions : –
1. Dougal, I used your tips for resizing the photos, it works great if reducing size. However, when I want to increase the width to higher than 500px, it does not seem working. Any tips?
2. I like your tips on too. Yet, all I hope to do is to center the photos, are there easier ways, instead of creating a new div?

So, I uploaded a mp3 to the media library and tried the embed short code and nothing. Does this not work for you own media library files? If not, will this come in 3.0. The reason I ask is because I use WordPress for my Podcast and hate using plugins for this…they always break or do not activate.

This functionality is for use with third-party services which provide oEmbed. WordPress itself is not an oEmbed provider. I know that there are several plugins which make it super easy to add an MP3 player to WordPress, though.

Hey, great post!I would like to embed videos that are uploaded into my WordPress website. I guess that this is similar to Michaels requirement with MP3 music.Is there a built-in mechanism to achieve this? or do I too need to use a third-party plugin?Thanks,Lea Hayes