How to Center YouTube Embed on a WordPress Post

This might seem like a very small thing, but it actually comes up quite often with people depending on how your WordPress site is setup and what theme you are using. And that is the question of how to center YouTube embed on your post. I am personally a big fan of centered images and so to have a YouTube video embedded and left aligned just looks off. Follow the quick steps below on how to center your YouTube videos.

How to Center YouTube Embed

By default in WordPress when you paste the URL of a YouTube video it should be centered as it uses the default WordPress embeds feature. But this is not always the case. And some WordPress owners have the auto embed featured disabled. Sometimes using the embed code from YouTube can give you more control.

Step 1

If you click on a YouTube video you can grab the “Embed” code as seen below.

copy youtube embed

Step 2

In your WordPress editor you will want to click into the “Text” tab so that you can insert code.

text mode wordpress

Step 3

Paste the embed code into the WordPress editor. Example:

<iframe src="https://www.youtube.com/embed/9hgiAfrb2NA" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

By default, it might appear like this below. As you can see it isn’t centered. You could increase the width but a lot of times you want it to match the flow of your other centered images which are most likely not full screen or full width.

Step 4

To center the YouTube embed we simply need to add a DIV on it and text-align center the contents. Below is the new code.

<div style="text-align: center;"><iframe src="https://www.youtube.com/embed/9hgiAfrb2NA" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

And below is now what it looks like. You now have a perfectly centered YouTube video! Quick and simple.

Hopefully this short little tutorial on how to center YouTube embed is helpful! If so, feel free to comment below. Make sure to also check out our post on how to center a Twitter embed.

GET MORE STUFF LIKE THIS

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

3 thoughts on “How to Center YouTube Embed on a WordPress Post

  1. This is helpful if you’re looking to manually embed! Many people will use the visual editor, where you can simply paste the youtube URL, and get an automatic embed. Centering these can sometimes be more of a pain – especially the case with the automatic Twitter and Instagram embeds!

    • Thanks Joe. Ya a lot of sites I have worked on either have automatic embeds disabled or it doesn’t format correctly. This means you then have to jump over to manual embed. Post coming up on centering Twitter embeds too. Twitter actually has a class which lets you easily do this that most people don’t know about.

      • Good point Brian. Only problem is, people are lazy! When I’ve spent a lot of time writing and editing a post, I then want to get it out there, so adding YouTube and Instagram post embeds with nothing more than a pasted URL will often win out for me – even tho I’m more than comfortable with manual embedding :)

Leave a Comment