How to Center a Video in WordPress

>How to Center a Video in WordPress
  • How to Center a Video in WordPress

Using videos in your posts, as well as other types of media, will enrich them, which is a very good thing for content marketing, user experience, and on-page SEO!

Usually, when you embed a video in your blog post, it will be displayed on the left side, which might look ugly. So, in this article, we’ll give you a tip on how to center a video in WordPress!

StudioPress Theme of the Month

For our example, we’ll use YouTube, which is the most common way of adding videos to your posts.

This tip also applies to other video-sharing websites, like Vimeo, Vine, and others.

How to embed a video in WordPress

The simplest way to embed a video in WordPress is to just copy the video’s link (e.g. https://www.youtube.com/watch?v=pov5VBarQt8 ), then paste it into your post’s text editor, and WordPress will automatically load it.

Usually, when you use this method, the video will cover the whole width of your content area:

Embed YouTube Video in WordPress

This method won’t work for all video-sharing websites!

If you want the YouTube video to be smaller in size or you want to toggle different options, like “Show player controls”, “Show video title and player actions”, etc., you’ll need to get the Embed code, which looks something like this:

<iframe width="400" height="225" src="https://www.youtube.com/embed/pov5VBarQt8" frameborder="0" allowfullscreen></iframe>

The thing is that after you insert the embed code in your post, your video will most likely appear like this:

YouTube Embed Video Not Centered

As you can see, it’s not centered, a thing which leads us to our main topic.

How to center the video

In order to center a video, you’ll need to add a piece of code around the embed part. Don’t worry, it’s simple.

After you added your embed code in your post’s Text (not Visual) editor, you need to wrap this code around it:

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

So it should look something like this (click to enlarge):

How to Center a Video in WordPress

After adding that code, our example video should be centered. Let’s check it out:

Centered YouTube Video in WordPress

Yep, it’s centered!

Note that on a lot of themes, the video won’t be responsive anymore when using an embed code. So, check this guide on how to make embedded YouTube videos responsive.

Conclusion

Now that you know how to center a video in WordPress, your content will look more organized and appealing!

Note that if you just paste the video’s link, not the embed code, like I mentioned above, you won’t need to center it anymore, of course, because it will cover the whole width of your post!

Hope you enjoyed our post! If you have any questions or thoughts, please drop a comment!

By |2018-08-13T12:01:56+00:00August 15th, 2015|Tips, WordPress|5 Comments

5 Comments

  1. Donncha Hughes December 22, 2016 at 6:31 PM - Reply

    Hi
    Nice one. This was a great help. But you need to update your post. there is a slight error. The picture with the code is correct but the text with the code explaining it has an extra colon in there…. … just after center
    Feel free to update this comment box after you do the edit to just the first two sentences and the last two.
    Thanks for your help.
    Donncha

    • ThemeSkills January 7, 2017 at 4:53 AM - Reply

      Hello! Thanks for the heads-up! I’ve made the modification.

  2. juicerfan June 4, 2017 at 7:21 PM - Reply

    Great tip. Been scratching my head over this for a while 🙂

  3. Matt Lytle May 15, 2018 at 6:21 PM - Reply

    Pasting the link, or embedding it, shows the video on the page when I refresh. But when I try to centre it by adding the code around it, it only shows up as the URL. Any idea why?

    • ThemeSkills May 15, 2018 at 7:30 PM - Reply

      Just pasting the link won’t work, you need the embed code. If that doesn’t work as well, then different things can interfere with it, like your theme, a plugin, a page builder, if you’re trying to add it using that…

Leave A Comment