How to Center Align a Video in WordPress

You embed a video in a WordPress page, publish it, and notice that the player sits awkwardly against the left side of the content area.

The surrounding text looks fine. The video works. It simply isn't positioned where you want it.

To center a video in WordPress, select the Video or Embed block and choose Align center from the block toolbar. If that doesn't work, check whether your theme, page builder, or the video's container controls its alignment.

Most video alignment problems can be fixed without installing another plugin.

Here's how to center videos in the Block Editor, Classic Editor, and popular page builders, along with what to check when the settings don't work.

Method 1: Center a Video in the WordPress Block Editor

If you're using Gutenberg, start with the built-in alignment controls.

WordPress supports video files uploaded directly to your website, as well as embedded videos from platforms such as YouTube and Vimeo.

The steps are similar, but the blocks aren't identical.

Center a Video Block

Use this method for videos uploaded to the WordPress Media Library.

1. Open the post or page in the WordPress editor.
2. Select the existing Video block, or add one using the + Block Inserter.
3. Upload your video or choose a file from the Media Library.
4. Click the Video block to display its toolbar.
5. Open the alignment control and select Align center.
6. Preview the page to confirm the video is positioned correctly.

The official WordPress Video block documentation explains the available alignment settings.

Depending on your theme, you may also see Wide width and Full width.

Those options change the width of the block rather than simply centering a smaller player.

Center an Embedded YouTube or Vimeo Video

For a hosted video, you can use the corresponding embed block.

1. Add a YouTube or Vimeo block.
2. Paste the video's URL.
3. Click Embed.
4. Select the embedded video.
5. Choose Align center from the block toolbar.
6. Preview the published layout.

You can find the available controls in WordPress's YouTube embed documentation.

If the embed occupies the full content width, selecting center alignment may produce no visible change. The player already fills its container.

In that situation, you'll need to adjust the available width or the surrounding layout.

Method 2: Center a Video in the Classic Editor

The Classic Editor works differently because videos may be inserted as media elements, shortcodes, or HTML embeds.

First, try selecting the media element in the Visual editor and using the center alignment control.

If that doesn't work, switch to the Text tab and inspect the markup.

For an iframe embed, you can place it inside a wrapper with a custom class:

  
For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

Replace VIDEO_ID with the actual video identifier and use a descriptive title.

Then add the following CSS:

.centered-video 

.centered-video iframe 

The wrapper controls the maximum width and centers the player within its parent container.

However, the iframe's height may require additional handling to preserve its aspect ratio across browsers and embed types. A more reliable approach for modern layouts is to use aspect-ratio together with a container whose dimensions are explicitly managed, as shown in the next section.

Avoid inserting a complete HTML document into the editor. Only the video markup belongs inside the post.

Method 3: Use CSS When the Video Won't Center

If the editor's alignment control doesn't work, check the rendered page before changing CSS.

Sometimes the block is centered, but the iframe or video element inside it has a fixed width or inherits a rule from the theme.

Other times, the surrounding column or container is controlling the layout.

For an embedded video, a dedicated wrapper is often the cleanest solution.

Responsive CSS for an Embedded Video

Add this HTML through an appropriate Custom HTML block:

  
For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

Then apply:

.centered-video 

.centered-video iframe 

This creates a centered video container with a maximum width of 800 pixels.

The player can shrink to fit narrower screens while maintaining its 16:9 proportions.

If your video uses a different aspect ratio, adjust the CSS accordingly.

You can add the CSS through your theme's available custom CSS interface or a properly managed stylesheet.

Keep the selector specific to the video you want to change. Applying broad CSS rules to every iframe can unintentionally affect maps, forms, and other embedded content.

Method 4: Center Videos in Page Builders

Page builders may control alignment through their own containers and layout systems.

If you’re using one, start with its built-in settings.

Elementor

In Elementor, select the Video widget and review its layout and styling controls.

Depending on the widget and version, alignment may be controlled through the widget’s parent container rather than a dedicated alignment setting.

Check the container’s justification, width, and layout properties.

Preview the page at desktop, tablet, and mobile widths to confirm the result.

Avada Builder

In Avada, a video may appear inside a YouTube, Vimeo, Video, or Code Block element, depending on how it was added.

If the video appears off-center:

1. Open the page in Avada Builder.
2. Select the element containing the video.
3. Check its width and available alignment settings.
4. Inspect the parent Column and Container settings.
5. Adjust the layout if the surrounding column is controlling the position.
6. Preview the result across the responsive breakpoints.

For a custom iframe inside an Avada Code Block, you can use the responsive HTML and CSS example above.

Avoid editing global theme CSS until you’ve confirmed the issue isn’t caused by an individual column or element setting.

Common Reasons a Video Won’t Center

If you’ve already selected Align center and the video still appears incorrectly positioned, work through these checks.

The Video Is Already Full Width

A video that fills its entire container won’t visibly move when you center it.

Reduce its maximum width or use a narrower parent container if you want space on either side.

The Parent Column Controls the Layout

Some themes use Flexbox, Grid, or custom alignment rules.

Those properties can affect how a video is positioned, regardless of its block-level alignment.

Inspect the parent element and its styles before adding another rule to the video itself.

The Embed Has Fixed Dimensions

An iframe with fixed dimensions can overflow a narrow container or look incorrectly aligned.

Make sure it can resize within the available width.

For a standard landscape video, a 16:9 aspect ratio is usually appropriate.

It Looks Correct in the Editor but Not on the Live Page

First, open the published page and check whether the alignment issue is still present.

If you recently changed styles, clear the appropriate caching layers and reload the page.

Then inspect whether your theme or plugin applies different CSS in the editor and on the frontend.

Don’t start disabling plugins randomly. Identify the conflicting rule or recent change before modifying your site.

The Video Looks Wrong on Mobile

Check whether the player extends beyond the screen or whether a fixed width prevents it from shrinking.

Test with the actual viewport sizes your visitors use.

You should be able to watch the video without horizontal scrolling.

For additional guidance, see Responsive Design Strategies for the Mobile-First Era.

Best Practices for Videos in WordPress

Once the video is aligned, check the rest of the experience.

• Keep the player responsive. Avoid fixed dimensions that cause overflow on smaller screens.
• Use appropriate widths. A video doesn’t need to stretch across the entire browser window to be useful.
• Provide captions when appropriate. Captions improve accessibility and help visitors who cannot hear the audio.
• Choose hosting carefully. Self-hosted video can increase storage and bandwidth demands, while third-party embeds introduce their own scripts and privacy considerations.
• Test playback. Make sure the video loads, plays, and remains usable on mobile devices.

If you’re embedding several videos on one page, also review performance. Multiple third-party players can load substantial resources.

The video’s appearance matters, but visitors still need to be able to use the page comfortably.

Fix the Layout Before Adding Another Plugin

For most WordPress websites, centering a video is a straightforward layout adjustment.

Use the Block Editor’s alignment controls first. If the video remains off-center, inspect its dimensions and the surrounding container.

For Classic Editor embeds or custom layouts, a small amount of targeted CSS can handle both centering and responsive sizing.

And if you’re using Avada or Elementor, check the page builder’s own layout settings before overriding them.

There is rarely a reason to install a dedicated alignment plugin for a problem that can be fixed with the tools already available.

If video alignment is part of a larger WordPress layout or functionality issue, MoDuet’s website development team can help identify and correct the underlying problem.