WordPress oEmbed: Embed (Almost) Everything Into Your Site

WordPress oEmbed: Embed (Almost) Everything Into Your Site

Placing videos, images, tweets and many other kinds of external media into your WordPress website is easy with oEmbed. WordPress plugins are the life of the system and in 2013 more than ever there is a plugin for almost everything but it is nice to be able to get jobs done without the use of extra plugins.

Many of the tasks that WordPress oEmbed can do for you now, in the past would have been done with the help of a WordPress plugin, the development team behind WordPress seem fairly committed to making oEmbed support more and more rich media types, which is great new for users.

So what is oEmbed?

Put simply, WordPress oEmbed recognizes URLs to a number of services, for example Youtube videos. When WordPress sees the URL it will connect to the external service (Youtube) and ask for the relevant HTML code to embed the video into the page or post.

No longer do you have to mess with copy & paste jobs to get code for a video, you literally drop the URL of the video into the WordPress editor and it works.

If you’ve not tried this before log into your WordPress site right now, paste a Youtube video URL into a page and preview it!

Here’s one you can try (Yes I managed to get a Star Wars reference into this post as well!)

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

There is one thing you need to remember when doing oEmbeds in WordPress, the URL to the media must be on a line by itself in the editor. You don’t need to switch out of the visual editor, dropping it in there is ok as long as it’s on a line by itself.

What else can you use WordPress oEmbed for?

While oEmbed has been around for a while now in WordPress, 3.5.x added a number of new services that work with oEmbed so the list is now getting longer.

Video services like Youtube, Vimeo, Blip.tv and Viddler are all supported. Photo sites like Instram,Flikr and Photobucket work and even social sites like Twitter and beginning to get support. For a full list of oEmbed services bookmark this page in the WordPress Codex.

See it in action right here!

When not coding and building WordPress sites I like to play and record music, so let me demo right here for you an oEmbed a track that I uploaded to SoundCloud (Yes it’s supported by oEmbed as well!)

Cool huh? (the oEmbed, not necessarily  the track :) )

Control the size of the embedded object

Here’s an additional tip that’s worth noting. WordPress relies on a content width setting to control how wide an embedded object should be. Some WordPress themes will have this set already and it will match the width of the content that is being displayed.

If you have a theme that does not support this width it’s very easy to add yourself.

if ( !isset( $content_width ) ) $content_width = 550;

You can safely place this into your theme’s function.php file. Basically what it does is check to see if the width has been set and if not sets it to 550 (pixels). Just change the number to what will work in your situation.

Based on this value, WordPress will use that as the width for all oEmbeds that it now sees. It’s clever enough to work out the height based on the width that you supply so there is no need to worry about a height setting.

oEmbed is a great functionality and one that I use all the time. It’s brilliant for end users of WordPress, no more messing with complicated plugins and settings, just drop the URL of the media into the page and your done!

Go and try it in your WordPress site now!

Peter Shilling
Peter is co-founder of The DMA, an Australian based WordPress development company and HelpForWP.com a WordPress plugin author.
Peter Shilling
Peter Shilling
This article has 11 comments
  1. Webmaster in Texas says:

    Love the Ombed functionality, great article. Also, great track, I too am a guitarist.

  2. Chris Raymond says:

    Is there any way to have the embedded video start at a specific point in time?

    1. Kyla says:

      Yes! I know that YouTube and Vimeo should both let you do this. If you want to start a YouTube at 1 minute 24 seconds just add &start=84s to the end of the “share this video” url. For a Vimeo video I think you would use #t=1m24s.

      Admin
      1. Chris Raymond says:

        The key to this is you HAVE to have /embed in the url; otherwise, YouTube html gets loaded into an iframe and overrides your start time parameter. FYI.

        1. Sean Michael says:

          I’m trying to oEmbed Vimeo videos at specific start times. Just appending #t=1m24s does not seem to do anything. It just plays the video from 0s. @Chris Raymond, can you expand upon this. Where exactly am I adding the `/embed` into the url?

          1. AJ Clarke says:

            I’m not sure you’ll be able to do that via a simple oEmbed. You would need to either use a 3rd party plugin or paste the full embed code on your page.

            Admin
  3. sweanisse says:

    Nice news but are clean & freash for wordpress.org users as well?

    1. AJ Clarke | WPExplorer says:

      Fresh&Clean is for WordPress.org users only. Automattic decided to remove the free version on wp.com for what I think is a silly reason.

      Admin
  4. Derrick Lamers says:

    Great article Peter but I had a quick question. Twitter highly recommends caching oembed responses to prevent rate limiting. I’ve done a bit of searching and I’m having trouble figuring out if WordPress does this already or if I need to develop my own method to prevent the rate limit.

    1. AJ Clarke | WPExplorer says:

      I couldn’t find any info on the WordPress oembed function regarding this. I’m about 99.9% sure that there isn’t any caching going on the WordPress end. But if you use a caching plugin for your site maybe that helps? Or you might have to find a 3rd party plugin (if you get a lot of hits) that does allow caching of your embeds.

      Admin

Leave a Reply