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:

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:

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.

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.

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.