How to Center a Video in WordPress (+Alternative Method)

Can’t get the video center aligned?

By the end of this guide, you will learn how to easily center align a video in WordPress — along with an alternative method.

Here’s a glimpse of the content:

• Why center align a video?
• Using Gutenberg
• HTML code adjustment
• Alternative method

Ready? Let’s get started!

Why center align a video in WordPress?

When creating content in WordPress, the presentation of multimedia elements like videos is just as important as the text itself.

Since WordPress defaults to left alignment when the video’s width is less than the content area, you need to fix the uneven space to avoid disrupting the content’s aesthetics.

Center aligning a video in WordPress improves the visual appeal and professionalism of your content as well as improves user experience.

How to Center Align Videos in WordPress

Each method requires different levels of familiarity with WordPress interfaces and coding but remains straightforward and simple.

Here are the methods:

Method 1: Gutenberg (Block Editor)

The Gutenberg editor offers a more intuitive, block-based approach to content creation, including video alignment.

This method is straightforward and does not require any coding knowledge at all (and is actually the easiest method here).

Start by editing an existing post or creating a new one:

• If you’re adding a new WordPress video, click the “+” button to add a block
• Select the video block.

You can upload a video, choose one from the media library, or paste a video URL.

After that:

• For an existing embedded video, simply select the video block in your content.
• With the video block selected, click the change alignment option.

From the dropdown menu, choose align center to center the video within your content area.

That’s it! That’s how you can easily center videos when using the new editor.

Method 2: HTML code adjustments (Classic Editor)

This one requires a slightly more hands-on approach for centering videos, especially when dealing with embed codes.

To be honest, although dealing with codes demands a basic understand of HTML, you can simply follow the steps below.

The short of it is:

• Switch to the text view so you can work directly with HTML
• Find your video’s embed code

Then, wrap it with the following HTML snippet for center alignment:

<div style="text-align:center;">Your video embed code here</div>

Replace the “Your video embed code here” with the actual embed code of your video.

⚠️ Note: If you have problem locating your video embed code, simply find the URL (ctrl + f) of the video while in the text video.

Alternative: Make Your Videos Full Width

If you instead want your video to fill the width of the content area, here are some ways to do it:

When using Gutenberg, you can simply choose the full width option from the alignment menu after selecting the video block:

For the classic editor, you can achieve a full-width video by using an inline style or class in your HTML.

Here’s an example using inline styles:

<div style="width: 100%; overflow: hidden;">
    <iframe src="your-video-url" style="width: 100%; height: auto;" frameborder="0" allowfullscreen></iframe>
</div>

Replace `your-video-url` with the actual URL of your embedded videos in your WordPress site.

In addition, there are plugins available that can help you embed responsive videos that fill the width of the container.

Some examples include:

• Responsive video embed
• Advanced Responsive Video Embedder

Center Aligning a Video in WordPress

Centering a video in WordPress is a simple yet impactful way to enhance the presentation of your content.

Fortunately, you can do this while using the Gutenberg Block Editor, the Classic Editor, or even by installing a WordPress plugin.

By following the steps here or opting to make videos full-width, you can achieve a polished and professional look for your site, thereby improving user experience.