Centering Embeds on WordPress.com

One of the cool things WordPress.com handles is media embeds. Instead of messing around with a bunch of embed codes, your WordPress.com site is setup to use oEmbed. This means if you want to share something like a YouTube video, you can just put the YouTube video’s link into your post and we handle the rest.

The tricky thing about embeds though is they can be tough to style if you want to do something specific with them in your post. With some services WordPress.com also provides shortcodes, but those don’t give you full design reign either.

The most common request I see is to center up an embed with a post or page’s body. While it’s hard to apply styles to the embed itself, we can definitely apply styles to an HTML element that surrounds the embed, like a div.

Using CSS Flexbox, it’s then pretty easy to center up that embed. Here’s a video:

The code I use that in video is the following:

<div style="display:flex;justify-content:center;">

// Link to embeddable content here

</div>

You can also see it in action on yesterday’s post.

If you have questions specific to your WordPress.com site, contact our staff at WordPress.com/Help.

Advertisements

Have a comment? Try to be nice.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s