How to Center a Video in WordPress

Are you looking for a way to center a video in WordPress? If your embedded video’s width is less than the content area, WordPress automatically aligns the video to the left. This may not be suitable for some users who want to keep the video in the middle of the page. In this article, I will show you how to center a video in WordPress easily.

How to Center a Video in WordPress (YouTube, Vimeo)

WordPress comes with a user-friendly visual editor which allows you to center an image or align it to the left or right. Unfortunately, these features won’t work on a video embedded with iframe embed code from an external video sharing site (e.g. YouTube, Vimeo). So in order to center this type of video in WordPress, you will need to enclose your video embed code with some simple HTML code.

1) Create a new post/page or edit the one where you have a video embedded.

2) Switch to the text editor on the edit screen.

3) Add the following piece of HTML code around your video embed code:

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

// your video embed code goes here

</div>

This is how it should look in the post edit screen:

screenshot showing how to center an iframe video in WordPress

For this tutorial, we are trying to center a youtube video embedded with iframe embed code from YouTube. But this tweak will also work if you wish to center a Vimeo video.

4) Update the post/page that you are editing. Your video should now be aligned in the middle of the content area.

How to Center a WordPress Video

While this tweak is very simple to use, it may not work on a video that you have uploaded via the WordPress media library (e.g. an MP4 video). This is because WordPress actually uses the MediaElement.js library, an HTML5 video and audio framework, to embed its videos (If you wish to use a different player check my WordPress video plugin). This is how it should look like in the text editor:

screenshot showing the WordPress video shortcode in the post edit screen

After playing around with one of my videos, I have been able to find a way to center an uploaded video in WordPress.

1) Go to Appearance > Customize from your WordPress admin dashboard.

2) This is will open your theme customizer. Click Additional CSS.

screenshot showing the additional css menu in the customizer

3) Add the following piece of CSS code in the editor:

.wp-video{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

This will automatically center all the videos that you have embedded from your WordPress media library.

4) Update the post/page. Your video should now be aligned in the middle of the content area.

screenshot showing how to center a video in WordPress

I hope this article helped you learn how to center a video in WordPress. These tweaks will also be helpful if you are trying to center a Vimeo video in WordPress.

If you liked this article, please don’t forget to subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: This page may contain affiliate links. If you follow one of those affiliate links and purchase something it will provide me with a little bit of a commission. This costs you nothing extra but helps maintain my site, free plugins, and themes. So I thank you for your support.

6 thoughts on “How to Center a Video in WordPress”

  1. This helped a lot, thanks!

    Reply
    • @Lenka, You’re welcome.

      Reply
  2. I’m using Travelbiz theme by Keone Themes. This CSS code didn’t work there.

    This problem prevents me from posting videos on my blog as I can not change alignment of my videos and they always load half page width to the left side of my blog page.

    Reply
    • After restarting my browser and laptop it worked.

      Thanks mate

      Reply
  3. This helped a lot, thanks!♥

    Reply
  4. Worked like a charm! Thank you so much!!!!!

    Reply

Leave a Reply to admin Cancel reply