elegant themes

The ultimate guide to embedding HTML and iframes in WordPress

| March 24, 2011 | 9 Comments

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.

Tags: , , , , , , ,

Category: Tips

About Miriam Schwab: Miriam is the friendly CEO of illuminea, a WordPress design and development agency. Miriam is a huge fan of WordPress and has been using it for over five years now. In addition, Miriam and her team have been organizing the local Israeli WordCamp conferences for the past few years. View author profile.


Comments (9)

Trackback URL | Comments RSS Feed

  1. [...] wpgarage.com wird beschrieben wie man die Einbetten-Funktion (oEmbed) auch auf zusätzliche Dienste [...]

  2. Elelta says:

    thank you thank you!

  3. jennifer says:

    Works like a charm! Someone had recently asked on the WordPress.com forums about getting a flickr shortcode and here it was under our noses all along. Thank you Miriam!

  4. [...] Update: I found an even better way of embedding iframes and HTML in WordPress, so I recommend ignoring what I wrote here, and checking out The ultimate guide to embedding HTML and iframes in WordPress. [...]

  5. WordPress removes iframe when you switch from “HTML” to “Visual” tab in your editor because of the security reasons.
    You can use this plugin to embed iframe into post content using such shortcode: [iframe width="640" height="480" src="http://player.vimeo.com/video/3261363"]

  6. Ryan says:

    Hmmm, March 24 and this just showed up in Google Reader now – along with 9 other posts from WPGarage.com.
    Either Google Reader screwed up, or you did something weird with your feed to cause it.

    Thought I’d better let you know though.

     

  7. Great article. Maybe you can help me. I just want to embed post-links in the way, Facebook or Google+ did it.

    The idea is to put in a link and then get the excerpt wird a thumbnail.

    Embedly does not work the way I wnat.

    Any other ideas?

    Thanks and Cheers from Germany
    Hansjörg

  8. Thad says:

    I’m still having a lot of trouble with this (I know this is an old post, but I’ve run out of options)

    I am posting the slideshare.net embed link for wordpress, and it has “&doc” in it. It has worked fine for quite awhile, but recently it stopped working – the HTML editor is changing the “&” in this:

    [slideshare id=xxxxxxxx&doc=overview-xxxxxxxxxxxx-phpapp02]

    into this:

    [slideshare id=xxxxxxxx&doc=overview-xxxxxxxxxxxx-phpapp02]

    …and it just shows the code. It no longer embeds.

    I’ve asked in the wordpress support forums, and I’ve asked in the slideshare support forums, and no one can tell me anything at all.

    I really appreciate any suggestions for resolving this! I just want to be able to embed slideshare at my site again – I have no idea what changed that prevented that from happening. It’s worked fine for months.

    • Thad says:

      Well, the blog just stripped the code. Let’s see if I can get it to post here – it’s the standard html for the ampersand. Ignore the forward slashes:

      [slideshare id=xxxxxxxx&/amp/;doc=overview-xxxxxxxxxxxx-phpapp02]

      That’s what wordpress suddenly started doing.

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.

More in Tips (20 of 93 articles)