Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

YouTube Videos, Tweets, and More – the Magic of oEmbed

CMDR Mitchcraft

Reading time: 2 minutes

I’ll be straight with you – for a long time, adding media (other than text) to WordPress just flat out sucked.  You had to switch the site to Text (HTML) mode, paste in the object/embed code, and prayed that it looked right once you were finished.  It wasn’t necessarily a fault of WordPress – it was that the methods were just not what they needed to be to advance.

Queue up responsive design, a switch away from object/embeds to iFrames (for mobile access), and… it sucked even more.  For some reason, the visual editor absolutely did not cooperate with iFrames, and it left a lot of site creators begging for a better alternative.

oEmbed, while not directly developed by WordPress, is a great standard for allowing content to easily be dropped into WordPress’ visual editor.  By simply pasting in the url (https://www.youtube.com/watch?v=rbvxlvSIIww) for the example below, WordPress will recognize the URL as a youtube video and will create the appropriate player!

Adding an oEmbed Medium to WordPress

Adding a supported oEmbed link is easy – simply paste the link into the visual editor.

Supported Sites

There are quite a few sites supported – quite a few of them brought in by the latest release of WordPress (straight from the codex:)

  • Animoto
  • Blip
  • CollegeHumor
  • DailyMotion
  • Flickr
  • FunnyOrDie
  • Hulu
  • Imgur
  • Instagram
  • Issuu
  • Meetup
  • EmbedArticles
  • Mixcloud
  • Photobucket
  • PollDaddy
  • Rdio
  • Revision3
  • Scribd
  • SlideShare
  • SmugMug
  • SoundCloud
  • Spotify
  • TED
  • Twitter
  • Vimeo
  • WordPress
  • YouTube
  • iSnare

WordPress 4.0 actually makes oEmbeds even sweeter – by pasting in the link directly, the visual editor will actually show you a visual representation of what your embedded media will look like in the context of your article – neat-o!

  • Foursquare vs. Gowalla… annnnnd fight!

    Foursquare vs. Gowalla… annnnnd fight!

    Reading time: 5 minutes

    <script type=”text/javascript”>function initMenus() {    $(‘ul#accordion li ul’).hide();    $.each($(‘ul#accordion’), function(){        $(‘#’ + this.id + ‘.expandfirst ul:first’).show();    });    $(‘ul#accordion li h2.widgettitle’).click(        function() {            var checkElement = $(this).next();            var parent = this.parentNode.parentNode.id;             if($(‘#’ + parent).hasClass(‘noaccordion’)) {                $(this).next().slideToggle(‘normal’);                return false;            }            if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {                if($(‘#’ + parent).hasClass(‘collapsible’)) {                    $(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);                }                return false;           …

    ,
  • How to set up multiple “layouts” in a post loop (a la TechCrunch)

    How to set up multiple “layouts” in a post loop (a la TechCrunch)

    Reading time: 3 minutes

    I’ve seen a lot of hateful comments on TechCrunch regarding their new design.  I’m going to officially go on-record and say that (from a design standpoint) I really like where they’re going with the new style.  But, beyond that, under the surface, there’s a few other things that appear to be going on (I say…