Do you want to use WordPress to center-align videos?
WordPress will automatically align your video to the left if its width is less than the available space for your article by default, leaving additional room on the right side.
This tutorial will demonstrate how simple it is to center-align a video in WordPress.
Why do WordPress videos center align?
WordPress automatically aligns videos to the left by default when you embed them. This is because videos are external content that is incorporated into the content, making it impossible for WordPress to infer how you want to present it.
It automatically aligns it to the left as a best practice, leaving it up to you to change the alignment as necessary.
Users will enjoy a better viewing experience with your content if the video is centered. By doing this, you can avoid having a large blank space on one side of the page, which might make your document appear unprofessional.
The same issue will also occur if you upload videos straight to WordPress and their width is less than your content area. By default, WordPress will align them to the left.
Let's now examine how simple it is to center-align a video on a WordPress website. You can use the links below to skip ahead to any chapter as we'll cover both the block editor and the classic editor.
How to Center Video in the WordPress Editor?
The best approach to do this is to directly enter a YouTube or Vimeo video URL in the WordPress content editor if you want your movie to fill the width of your content section.
You must first update an existing post or page or add a new one. Simply paste the video link once you are in the content editor. WordPress will automatically embed the video.
Here is how your embed code would seem if you were using custom HTML.
<div style="text-align:center;">
/// your video embed code goes here
</div>
You may now preview the post or page and save your changes. The center of your content area will be neatly aligned with your video.
The width of your movie can also be manually increased to accommodate the content area. You must modify or add the "width" parameter to your embed code to accomplish this.
<iframe width="760" height="315" src="https://www.youtube.com/embed/4YpyiJ05YOg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Change to the Text view once you're in the editor. Now type the next HTML code:
<div style="text-align:center;">
/// your video embed code goes here
</div>
Just be careful to substitute your video's embed code with "your video embed code goes here."
Your page is now ready for preview and publication.
Visit your website to view the video, which is centered.
