In addition to adding images and image galleries to your pages and posts, WordPress also allows you to easily embed video, audio, and rich media from websites such as Twitter, YouTube, Instagram, Slideshare, and many other popular online services. This is done using two primary methods: Easy Embeds (oEmbeds) and HTML embeds.

Easy Embeds (oEmbeds) and WordPress Easy Embeds (oEmbeds) and WordPress

The easy embedding feature is powered by oEmbed, a protocol for embedding media from external websites and displaying it in your WordPress site as if it were a part of your page or post. Easy embedding works with the following popular services:

Top ↑

oEmbed Example – YouTube oEmbed Example – YouTube

Adding oEmbeds to your WordPress pages or posts is very simple.  If the media you are trying to embed is represented in the list above, all you need to do is copy the URL of that media, and paste it directly into the text of your WordPress page or post.  As an example, here is how to perform an easy embed of a YouTube video.

First locate the media URL.  This is different for each provider, but typically it is the page on their website that the video, image, slideshow, etc., is shown on.  In our example above, it’s the page you view the actual viseo on, when you are on YouTube.

Next copy the URL of that page.

Once you have copied the URL, simply paste it into the text editor of your page or post.  It must be on it’s own line (and not inline with your text) and DO NOT make it a hyperlink.  I.E., leave it as plain text, and not a clickable link.

When you are done, publish or preview your page/post to view the embed.  You will see that the area that once contained the URL is now replaced by the embedded media itself.  In this case, you can see we’ve successfully embedded our favorite kitten video into our blog post!

Top ↑

HTML Embeds HTML Embeds

Although easy embeds (oEmbeds) are much more straightforward to add to your site, it does not work with every provider, only those listed above.  However, if your media provider offers an HTML embed code, with just a few extra steps you can add them to you pages or posts as well.

Top ↑

HTML Embed Example – Google Map HTML Embed Example – Google Map

Google Maps provides an HTML iFrame code that allows you to embed a live map on your site’s pages or posts. First, type in the location you are looking for to find it in Google Maps.

Once your map is fully loaded, click on the Link button found in the top of the lefthand navigation column.  A popup will appear, as illustrated below.

Place your mouse cursor in the second text box titled Paste HTML to embed in website. Copy the code.

In the text editor of your page or post, click on the Text tab in the upper right corner of the editor window.

Locate the place on the page you want your embed to appear, and paste your embed code. As you can see, it is quite a bit of code, so it is important not to do anything to modify it or it may not work.

When you are done, publish or preview your page/post to view the embed.  You will see that the area that once contained the HTML embed code is now replaced by the embedded media itself.  In this case, you can see we’ve successfully embedded a Google Map of our favorite summer camp into our blog post!

 

Tip:  Once you have entered your HTML embed code, it is not recommended that you then switch back to the Visual editor mode.  Because of the way the visual editor works, switching back and forth can render the code inoperable.  A best practice when working with HTML embeds is to add them last, after you have added all your normal text, images, and other content.