• WP Themes
    • Free Themes
      • Oswald Lite WP Theme
      • MariGold WP Theme
    • Premium Themes
      • Oswald WP Theme
  • WP Tuts
  • WP Reviews
  • WP Hosting
  • Freebies
  • Book a Review
  • Contacts
Home/How to Center-Align Video in WordPress: Embedded + Self-Hosted
2 shares
How to Center-Align Video in WordPress Embedded + Self-Hosted
February 21, 2021 | Tutorials | 0 comments

How to Center-Align Video in WordPress: Embedded + Self-Hosted

Want to learn how to center-align video in WordPress? Then read further to see how to make this both with embedded and self-hosted videos.

You’ve probably sometimes faced the situations when you want to embed a video from YouTube or Vimeo and you copy the embed code with the frame but you see that it is left-aligned in your post or page, and this looks somehow inappropriate.

The same can happen when you upload a self-hosted video to your media library to display it right from there and this is also aligned to the left side of your page.

In this post, I am going to show you how to center-align both embedded and self-hosted videos in WordPress. So, let’s see!

Center Align the Embedded Video in WordPress

So, as always, you go to any certain video, for instance, on YouTube, and you click the ‘share’ option to find the embed code for your website.

share option youtube

embed option youtube

You copy and paste the embed code to the text editor on your website.

embed code youtube

embed code inserted

And this is how it looks on the front-end. The video is left aligned.

embedded video left aligned front end

To make it centered, insert the following HTML code into your embedded frame as shown on the snapshot.

<div style=”text-align: center;”> /// your video embed code goes here </div>

center align embed inserted

Update the page or post and preview the update. Now you see your embedded video is centered.

centered embedded video in wordpress

Center Align Self-Hosted Video in WordPress

This option is required when you upload a video to your media library if you want to make it a self-hosted one and display it right from your own website without relying on any third-party servers.

In my particular case, I faced the necessity to center self-hosted mp4 videos when creating a post about coolest overlays recently. All videos in that post are self-hosted ones.

So, to center such a video, go to the Appearance -> Customize menu in your WP dashboard and find that Additional CSS tab in the Customizer.

After that, embed the following code into the Additional CSS tab of your WP website. See the snapshot.

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

additional css center video wordpress

Publish the changes and now your videos are going to be displayed in the center of your post or page.

self-hosted video centered wordpress post

Hope this small tut was helpful,

Melany H.

melany hollywell wpdaddy
wpdaddy

Hi! I’m an experienced writer exploring WordPress for more than 5 years. I’m happy to share my knowledge and ideas with you and I hope you join me.

Cheers,
Melany H.

Share this post:
Related Posts
September 22, 2017

Woodwork, Roofing and Construction WordPress Themes for Skilled Masters

Today’s awesome WordPress themes collection includes a bunch of templates devoted to woodwork masters, carpenters, handymen, plumbers and bathroom fixers, roof rep...
Read this post
April 30, 2019

How to Build Contact Forms in WordPress

Every type of a website including online store, blog, corporate one, or any other variant, usually has a certain structure consisting of a number of key pages. A reg...
Read this post

Leave a Reply Cancel reply

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

Subscribe to our Newsletter
Never miss out on the latest news, updates and tips. Subscribe now!
Top Marketing WordPress Theme 2021
Ewebot Marketing WordPress Theme
Download Revolution Slider Here!
revolution slider image
Categories
  • Art and Culture
  • Blog and Magazine
  • Business
  • Cars and Transport
  • Cleaning and Janitorial
  • Crypto ICO Token Sales
  • Design
  • Directory and Listing
  • Education
  • Entertainment
  • Events
  • Fashion
  • Free Themes
  • Freebies
  • Gutenberg
  • Health and Beauty
  • Hosting
  • Industry and Construction
  • Inspiration
  • Interview
  • Kids
  • Landscape and Gardening
  • Multipurpose
  • Non-Profit and Charity
  • Pets and Animals
  • Photography
  • Plugins
  • Portfolio
  • Real Estate
  • Restaurant
  • Reviews
  • Sports
  • Technology
  • Traveling
  • Tutorials
  • WooCommerce
Popular Posts:
  • Best Face Generators to C...
  • How to Add Video in the S...
  • How to Enlarge Images Whe...
  • How to Center a Shortcode...
  • How to Fix ‘Browser...

Copyright © 2021 WP Daddy. All Rights Reserved.

Follow Us: