How to Center-Align Video in WordPress: Embedded + Self-Hosted

Want to learn how to center-align video in WordPress? Then read further to see how to make this both with embedded and self-hosted videos.

You’ve probably sometimes faced the situations when you want to embed a video from YouTube or Vimeo and you copy the embed code with the frame but you see that it is left-aligned in your post or page, and this looks somehow inappropriate.

The same can happen when you upload a self-hosted video to your media library to display it right from there and this is also aligned to the left side of your page.

In this post, I am going to show you how to center-align both embedded and self-hosted videos in WordPress. So, let’s see!

Center Align the Embedded Video in WordPress

So, as always, you go to any certain video, for instance, on YouTube, and you click the ‘share’ option to find the embed code for your website.

You copy and paste the embed code to the text editor on your website.

And this is how it looks on the front-end. The video is left aligned.

To make it centered, insert the following HTML code into your embedded frame as shown on the snapshot.

<div style=”text-align: center;”> /// your video embed code goes here </div>

Update the page or post and preview the update. Now you see your embedded video is centered.

Center Align Self-Hosted Video in WordPress

This option is required when you upload a video to your media library if you want to make it a self-hosted one and display it right from your own website without relying on any third-party servers.

In my particular case, I faced the necessity to center self-hosted mp4 videos when creating a post about coolest overlays recently. All videos in that post are self-hosted ones.

So, to center such a video, go to the Appearance -> Customize menu in your WP dashboard and find the Additional CSS tab in the Customizer.

After that, embed the following code into the Additional CSS tab of your WP website. See the snapshot.

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

Publish the changes and now your videos are going to be displayed in the center of your post or page.

Hope this small tut was helpful,

Melany H.

wpdaddy

Hi! I’m an experienced writer exploring WordPress for more than 5 years. I’m happy to share my knowledge and ideas with you and I hope you join me.

Cheers,
Melany H.