How to Center a Video in WordPress

Frustrated that you can’t get your videos centered in your WordPress posts? Maybe you have a post that looks like this:

not-centered

This quick tip will help you.

With WordPress, you can go to a place like YouTube, copy the URL, put it into your post, and your video will show up automatically.

With this little trick, however, you will need to get the full embed code (not just the URL).

embed-code

Once you have the embed code, go the TEXT tab in your editor, and put the your embed code in the middle of the following snippet of code where it says “embed-code.” (*Code updated.)

<div style="text-align:center">embed-code</div>

It should look something like this:

text-tab2

And that’s it. You should now get a centered video like the one below.

centered-video

Make It Full Width

While centered is better then left-aligned, what many people would actually prefer is a video that covers the full width of their post.

You can do that by using the embed code too. On YouTube (or wherever), just change the embed to be a larger size. YouTube makes this very convenient. You only need to put in the width you want, and it will calculate the height for you in order to keep the video the same ratio.

Let’s say, for example, that I know the width of your post area is 700px. Just put that into the width box on YouTube. You will also see the sizes change in the embed code itself. If you don’t know the width of your posts, just play with it till you get it right.

(You’ll notice that YouTube has some common sizes already listed in a pull-down menu. You’ll need to choose “Custom size” if you want anything other than those sizes.)

custom

And here’s a full width look:

full

*Note: Of course if your video is the full width of your post, there’s no need to center it. You can just paste the embed code into your Text tab area.

photo credit: fdecomite

Comments (7)

  1. I’m sorry, but you introduce people to invalid/outdated code. A better example (provided that your theme includes the “standard” align-classes, you could do something like:

    EMBED CODE

    But yeah, some elementary understanding of HTML and CSS is all it takes.

  2. Even the revised code is problematic, since inline CSS can’t be easily overridden. Better to apply one of the standard alignment classes, as a previous poster stated, assuming your theme supports them. Otherwise, create a child theme and add the classes to your style.css.

  3. Am I reading this in 2013? I thought we can just copy the link in the browser and paste it in the post editor.

    To make the video looks great (full width), don’t forget to define the width of your post in functions.php file.

Participate