Tutorial

WordPress oEmbed: Embed (Virtually) All the things – WhoClick

Placing videos, images, tweets and many other kinds of external media into your WordPress website is easy with oEmbed. WordPress plugins are...

Written by admin · 2 min read >
WordPress oEmbed: Embed (Almost) Everything

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 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.

What Is oEmbed?

Put simply, WordPress oEmbed recognizes URLs to a number of services to automatically format and display them. For example Youtube videos, SoundCloud audio or even WordPress posts. When WordPress sees the URL it will connect to the external service (such as 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 can literally drop the URL of the video or other media right into your WordPress post or page and it works.

What Can You Use WordPress oEmbed for?

While oEmbed has been around for a while now in WordPress, since version 2.9. But since then they’ve added a number of new services that work with oEmbed so the list is getting longer.

Video services like Youtube, Vimeo, and even Hulu are all supported. Photo sites including Instagram, flickr and Photobucket all work great. Even social sites like Twitter and Facebook are supported. Heck, you can even add your blog posts.

For a full list of the 36 oEmbed services head over to this page in the WordPress Codex.

How to Use oEmbeds in the Classic Editor

For those of you using the Classic Editor you simply need to paste the links of your choosing into the rich text editor. So, if you want to share the Mellow Indie Chill playlist from SoundCloud, you first need to grab the url:

https://soundcloud.com/soundcloud-scenes/sets/coffee-shop-mellow-indie-chill

Then paste it into the main text area and you’ll see this:

Cool huh?

There is one thing you need to remember when using oEmbeds in the WordPress Classic editor – the URL to the media must be on a line by itself. You don’t need to switch to the text editor or anything, just remember to click enter so the it’s on a line by itself.

How to Use oEmbeds in Gutenberg

If you’re using Gutenberg adding oEmbed is a little different as there’s a block specifically for adding them. To get started you can find the block for your specific media type (Gutenberg has a number of block options) or just search for the Embed block.

WordPress oEmbed in Gutenberg

Next add your link:

WordPress oEmbed Gutenberg Block

And then click the button to Embed. The block will identify the embed and display it accordingly as seen below:

WordPress oEmbed Gutenberg Display

That’s it!

Control the Size of Embedded Objects

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 = 600;
}

You can safely place this into your theme’s function.php file.

WordPress also recommend adding a bit of CSS to your theme as well:

.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}

Basically what this 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!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *