Wednesday 23 May 2018

How to centrally align oEmbeds (including in Gutenberg)


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
Source: https://managewp.org/articles/17460/how-to-centrally-align-oembeds-including-in-gutenberg



source https://williechiu40.wordpress.com/2018/05/23/how-to-centrally-align-oembeds-including-in-gutenberg/

No comments:

Post a Comment