Welcome Guest! Login? Checkout

Probably one of my favourite features in WordPress is the oEmbed features. oEmbed is a technology that allows you easily embed content from other sites that use oEmbed technology. Content such as YouTube videos, Twitter Tweets or Spotify playlists can be easily embedding by just dropping a link onto a page, but with the ease of use with WordPress, it can be tricky to style these posts. One usual styling is by making sure the content is centrally aligned. This can be a bit tricky. Here is how you centrally align oEmbeds, including instructions in Gutenberg.

How is a oEmbed structured?

oEmbeds are usually structured within an <iframe> tag, which means we could use CSS to centre all iframes using code like this:-

However this isn’t ideal. The problem is that any other iframe on the page will be centred, and you probably don’t want this. However you can target just oEmbeds using a hook.

The oembed_result Filter

The oembed_result filter can be used here. It accepts three arguments – $html (the already generated HTML), $url (the URL we are using) and $args (an argument array). This will allow you to control the oEmbed before outputting it on the page.

How To Centrally Align oEmbeds

To take advantage of the filter, and to begin to centrally align the oEmbed, simply add the following code to a plugin or your theme’s PHP.

This code will wrap the current HTML generated for the oEmbed with a div with a simple class name – oembed. This is quite simple, and with a bit of work you can expand it a bit more with more creative searches (such as using the URL to determine the type of oEmbed there is and apply a different class).

After adding this code to your template’s PHP, you can add the following code to your CSS to centrally align your oEmbed. This is very similar from how to centrally align WP Flipclock.

If it doesn’t work, results are cached for this filter, so you may need to use something like Transient Manager to clear the cache.

What About in Gutenberg?

This is one of those cases where Gutenberg makes life easier for the theme developer, in that the oembeds are blocks. The blocks, also, have a wrapper and have a specialist class – .wp-block-embed. There are many other classes associated with each block. For example .is-type-xyz (with xyz replaced as a content type such as ‘video’) and .is-provider-abc (with abc replaced with a service such as ‘youtube’). This will allow you to not only control individual blocks, but also services and content types. For example, to change all embeds to align centrally, use this code here.

And to change all video embeds to align centrally, use this code.

Finally, for all YouTube embeds to be aligned centrally, use this code.

This does require Gutenberg or the new editor (which should be in WordPress 5.0) to be present, so if you are a theme developer, be sure to get involved in this. Having such a useful feature included in your theme can lead to downloads and more sales.

 
 
 

Comments

Polite Disclaimer: I am welcome, open and willing for corrections to be shared in the comments (with corrections being added to posts and credited), and the comments field should be used to promote discussion and make this post better. I do not know everything and if anybody finds a better way to do something, then by all means please share it below.

However, I'm unable to offer support to posts. The reason being is that WordPress has tens of thousands of plugins and millions of themes. As such, finding out exactly why code doesn't work with your setup is a long process. If you wish for me to look at your code, please use the priority support area.

Comments asking support will be left on the site, but there is no guarantee of answer.

    Leave a Reply

    Your email address will not be published.

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">
    *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.