oEmbed Additions in WordPress


One of the minor hassles of running WordPress Multisite is dealing with the rules about HTML cleansing- mainly the removal of iframe elements. You could install unfiltered MU but the plugin itself warns you that’s end-of-the-world dangerous and the plugin hasn’t been updated in two years. The combination might make one a bit nervous.

In this particular case, I have a group who wants to use videos from dotsub.com. Turns out it’s a good site for captioning and other things that make the video more accessible. This group is working on universal design so dotsub makes doubly good sense.

WordPress supports a number of sites using oEmbed. That’s the magic that allows you to paste in a YouTube URL and the embed codes are taken care of without you having to do anything. WordPress essentially run off a white list of sites that it accepts off the bat.

It turns out that oEmbed lists a bunch of sites that support the API and dotsub.com ended up being one of them.1 That means I just have to add dotsub.com to the WordPress install’s whitelist. The ever handy WordPress codex lets me know that I do that using wp_oembed_add_provider and further down on that page you’ll see that lives wp-includes/media.php.

I could have done it this way but I don’t like editing the core WordPress files for all sorts of reasons. One of them would be that I’d have to redo this every time WordPress updates. Another would be that I stand a much greater chance of seriously breaking something.

I figured I could write a plugin to do something similar. I have never written a plugin so I wandered around a bit looking for oEmbed plugins to use as an example. I found Codepen oEmbed relatively quickly.2 It is a dead simple plugin. It simply says (I left out the non-action stuff that says the name etc.) –

wp_oembed_add_provider( 'http://codepen.io/*/pen/*', 'http://codepen.io/api/oembed' );

That’s all there is to it. Who knew?3 Somehow I thought it’d be much harder and more involved.

All I had to do was replace the codepen url structure with the dotsub url structure, like so.

 wp_oembed_add_provider( 'http://dotsub.com/view/*', 'http://dotsub.com/services/oembed' );

dotsub.com had a handy page to help me get the structure straight. The first chunk is the URL structure and the second is the API endpoint on the site.

I haven’t done it yet but it seems like it’d be easy to keep adding URLS to this plugin to add additional oEmbed sites and it’d be fairly seamless. If wiser folk than I have better ways to do this, I’m all eyes, ears etc.

1 Another option is to view the page source and search for oembed.

2 You should checkout Code Pen. It is full of cool things.

3 Probably lots of people but still . . .

Comments on this post

  1. Alan Levine (@cogdog) said on April 22, 2014 at 10:04 pm

    That is very cool, Tom, great discovery.

    • Tom Woodward said on April 24, 2014 at 8:44 pm

      Ha! I feel good then. I was worried there was something totally obvious I was missing.

  2. Tim Owens said on April 30, 2014 at 3:12 pm

    Would be nice to have a single plugin that offered an administrative interface to turn on any of the providers (a simple checkbox option page) listed as available for oEmbed. I didn’t realize you could support all of them in WordPress.

    • Tom Woodward said on April 30, 2014 at 3:19 pm

      Good point. I may get adventurous enough to try that at some point.

      • Tim Owens said on April 30, 2014 at 5:16 pm

        I decided to at least start down that path here https://github.com/timmmmyboy/wp-oembed. I’m using it as an opportunity to learn the Settings API which is…complex to say the least. Feel free to play with it as well.

        • Tom Woodward said on May 1, 2014 at 10:19 pm

          Very nice. Thanks.