How to Align a WordPress Video in the Middle of the Page

Are you using the WordPress video shortcode to embed self-hosted videos into your website? Are you trying to position a video in the middle instead of it being aligned to the left by default? Today I will show you a simple tweak to center your videos with some custom CSS.

WordPress video feature allows you to embed a video by directly inserting the URL or using a simple Shortcode. For example:

WordPress video embed with a shortcode or URL

When a video file is embedded it’s aligned to the left by default.

WordPress video aligned to the left

How to Align a WordPress Video in the Middle

In order to align it in the middle, you can apply this tweak,

1. Install the Simple Custom CSS plugin.

2. Add this CSS under “Appearance -> Custom CSS“.

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

After applying this CSS, all the videos will be automatically aligned in the middle.

WordPress video aligned in the middle
Disclosure: This page may contain affiliate links. If you follow one of those affiliate links and purchase something it will provide me with a little bit of a commission. This costs you nothing extra but helps maintain my site, free plugins, and themes. So I thank you for your support.

6 thoughts on “How to Align a WordPress Video in the Middle of the Page”

  1. Hello!

    I’m wondering how you would go about adding css to only one video on a certain page, Instead of creating the css that edits all the instances of “.wp-video” ???

    Reply

    • @Laura, WordPress doesn’t seem to have a unique class for each video instance. So I’m not sure if you can target a specific video with CSS. You can probably place the video inside a custom div and target that div with CSS? For example:

      Text Editor:
      [code autolinks=”false” gutter=”false”]
      <div class="my-wp-video1">
      video/video shortcode
      </div>
      [/code]

      CSS:
      [code autolinks=”false” gutter=”false” language=”css”]
      .my-wp-video1 .wp-video {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      }
      [/code]

      Reply

  2. Hello 🙂

    Firstly, thank you very much for your helpful plugin, it works great!
    Or it worked, after I installed MediaElement.js plugin this CSS has no more effect on my video and it has it’s left position back. May I ask you for an advice or idea how to center my video using this plugin?

    Thanks a lot

    Basa

    Reply

    • @Basa, There is no need to install any MediaElement.js plugin. It comes with WordPress.

      Reply

      • Hello. I know, that there is a video player in WordPress by default, but I did’t know how to adjust it to disable full screen option and also how to configure small size of video appearance without previous scaling of the video. If you are able to help me with configuration of base player I wouldn’ t need the other plugin and the strategy for center the video would be effective again.

        Thanks a lot

        Reply

  3. Thank you very much!

    Reply

Leave a Comment