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.

3 Comments

  1. Joe Gallant October 24, 2016
    • Brian Jackson October 24, 2016
      • Joe Gallant October 26, 2016

Add Comment

37 Shares
Tweet
Share
Share
Buffer