Noor's Plugin

WordPress Plugins, Themes, Hosting, Tutorials & more!

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

How to Center a Video in WordPress

Are you looking for a way to center a video in WordPress? If your embedded video’s width is less than the content area, WordPress automatically aligns the video to the left. This may not be suitable for some users who want to keep the video in the middle of the page. In this article, I will show you how to center a video in WordPress easily.

How to Center a Video in WordPress (YouTube, Vimeo)

WordPress comes with a user-friendly visual editor which allows you to center an image or align it to the left or right. Unfortunately, these features won’t work on a video embedded with iframe embed code from an external video sharing site (e.g. YouTube, Vimeo). So in order to center this type of video in WordPress, you will need to enclose your video embed code with some simple HTML code.

1) Create a new post/page or edit the one where you have a video embedded.

2) Switch to the text editor on the edit screen.

3) Add the following piece of HTML code around your video embed code:

<div style="text-align: center;">

// your video embed code goes here

</div>

This is how it should look in the post edit screen:

screenshot showing how to center an iframe video in WordPress

For this tutorial, we are trying to center a youtube video embedded with iframe embed code from YouTube. But this tweak will also work if you wish to center a Vimeo video.

4) Update the post/page that you are editing. Your video should now be aligned in the middle of the content area.

How to Center a WordPress Video

While this tweak is very simple to use, it may not work on a video that you have uploaded via the WordPress media library (e.g. an MP4 video). This is because WordPress actually uses the MediaElement.js library, an HTML5 video and audio framework, to embed its videos (If you wish to use a different player check my WordPress video plugin). This is how it should look like in the text editor:

screenshot showing the WordPress video shortcode in the post edit screen

After playing around with one of my videos, I have been able to find a way to center an uploaded video in WordPress.

1) Go to Appearance > Customize from your WordPress admin dashboard.

2) This is will open your theme customizer. Click Additional CSS.

screenshot showing the additional css menu in the customizer

3) Add the following piece of CSS code in the editor:

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

This will automatically center all the videos that you have embedded from your WordPress media library.

4) Update the post/page. Your video should now be aligned in the middle of the content area.

screenshot showing how to center a video in WordPress

I hope this article helped you learn how to center a video in WordPress. These tweaks will also be helpful if you are trying to center a Vimeo video in WordPress.

If you liked this article, please don’t forget to subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Related

Written by Noor Alam · Categorized: wordpress

Comments

  1. Lenka says

    This helped a lot, thanks!

    Reply
    • admin says

      @Lenka, You’re welcome.

      Reply
  2. Nirupam says

    I’m using Travelbiz theme by Keone Themes. This CSS code didn’t work there.

    This problem prevents me from posting videos on my blog as I can not change alignment of my videos and they always load half page width to the left side of my blog page.

    Reply
    • Nirupam says

      After restarting my browser and laptop it worked.

      Thanks mate

      Reply
  3. saeed says

    This helped a lot, thanks!♥

    Reply
  4. Jake says

    Worked like a charm! Thank you so much!!!!!

    Reply

Leave a Reply Cancel reply

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

Search Noor’s Plugin

Recent Posts

  • How to Add a Quantity Field to a Stripe Payment Button
  • How to Add a Price Field to a PayPal Button
  • Hide Product Image for WooCommerce Plugin
  • How to Show a Download Button to Logged in Users Only
  • How to Add a Price Field to a Stripe Payment Button
  • How to Disable/Hide Featured Images in WordPress Astra Theme
  • What is the White Screen of Death in WordPress?
  • How to Fix YouTube Error The uploader has not made this video available in your country
  • How to Configure SendGrid SMTP in WordPress
  • Checkout for PayPal WordPress Plugin

Copyright © 2022 · Noor's Plugin

This website uses cookies to improve your experience. By continuing, you agree to their use.Got it! Learn 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