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:

Continue reading, or jump ahead using these links:

Center a Video in WordPress
Make the Video Full Width

Center a Video in WordPress

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).

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:

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

Make the Video 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.)

And here’s a full width look:

*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.

Щелкните ниже, чтобы поставить оценку!
Всего: 0 В среднем: 0

Написать комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *