WordPress HowTo

How-to guide for WordPress

  • Home
  • Plugins
  • Themes
  • Contact
    • Privacy Policy
  • About

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

Related

Written by Noor Alam · Categorized: wordpress

Comments

  1. Laura De Leon says

    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
    • admin says

      @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. Basa says

    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
    • admin says

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

      Reply
      • Basa says

        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. Toni says

    Thank you very much!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search WP HowTo

Recent Posts

  • How to Add a Reply-To Address in the Gmail SMTP WordPress Plugin
  • What Does a Security Challenge Mean on PayPal?
  • WP PayPal Button Integration with Contact Form 7
  • Can People See Your Address on PayPal?
  • Mailchimp Integration for WP PayPal Plugin
  • How to Show a Text Box at WP PayPal Checkout to Collect Custom Data from Buyers
  • How to Add a Recurring Price Field to a PayPal Subscription Button
  • How to Add a Quantity Field to a PayPal Button
  • How to Configure Product Variations in WP PayPal
  • How to Make Your WooCommerce Add to Cart Buttons Bigger

Featured Add-ons

Buy Now Custom Amount for PayPal

Buy Now Discount for PayPal

Contact Form 7 Integration for PayPal

Custom Input for PayPal

Mailchimp Integration for PayPal

Product Variations for PayPal

Variable Quantity for PayPal

Variable Subscription for PayPal

Copyright © 2023 · WordPress HowTo

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAcceptRead More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT