Beginner's Guide for WordPress / Start your WordPress Blog in minutes

Beginner’s Guide: How to Center Align a Video in WordPress

Do you want to center align a video in WordPress? By default, if your video’s width is less than your article area, then WordPress automatically aligns it to the left leaving extra white space on the right side. In this article, we will show you how to easily center align a video in WordPress.

How to center align a video in WordPress

Why Center Align Videos in WordPress?

By default, when you embed a video in WordPress it is automatically aligned to the left. This is because videos are external content embedded in the content, so WordPress is unable to guess how you would like to display it.

As a best practice, it automatically aligns it to the left. Leaving it up to you to adjust the alignment if needed.

Left aligned video in a WordPress post

We don’t recommend uploading videos directly to WordPress, but the same thing will happen with uploaded videos if their width is less than your content area.

That being said, let’s see how you can easily center align a video in WordPress or make it wider so that it looks good with in your content.

How to Center Align Video in WordPress

If you want your video to fill the width of your content area, then the best way to do this is by adding a YouTube or Vimeo video URL directly in post editor instead of using the embed code.

By simply entering the URL, WordPress automatically tries to display the video that fits your content area.

Add video URL to embed video in WordPress

However sometimes for one reason or another, you may need to use the embed code. In that case, you will need to add some simple HTML around your video’s embed code.

First, you need to switch to the text editor on post edit screen. After that, you need to add the following HTML code around your video embed code:

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

/// your video embed code goes here

</div>

You can now save your changes and preview the post or page. Your video will be neatly aligned in the center of your content area.

Video aligned to the center

Another approach is to increase the width of your video manually to fit the content area. To achieve this, you simply need to add or change the “width” parameter in your embed code.

<iframe width="760" height="315" src="https://www.youtube.com/embed/4YpyiJ05YOg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

If you are uploading a video directly in WordPress, then you can increase the width by using the video shortcode.

After inserting your video using the default media uploader, switch to the ‘Text’ editor and increase the width parameter in video shortcode.

Video shortcode

We hope this article helped you learn how to center align a video in WordPress. You may also want to see our comparison of YouTube vs Vimeo to see which one is better for your website.

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

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

12 CommentsLeave a Reply

  1. I’m trying to center a gif that I’ve embedded and the new editor doesn’t let me edit the HTML of this type of content. How can I center this?

  2. How does this work when using the Gutenberg Editor’s You Tube embed block? I tried both ways you described, but either are working.

    • With the YouTube embed block there should be a section when you select the block to set a specific alignment that you can use.

      Admin

    • You may want to try to clear any caching on your site to ensure you’re not seeing the cached version of the page.

      Admin

  3. You offer a lot of outstanding tricks and videos to go along. I have subscribed to your email newsletter and have seen many videos for my new website. However, your trick on aligning the video on the center did not work. Here is the issue: I shot a 15-sec video on iPhone converted into mp4 and uploaded on my host server, shows up in my WordPress galley. Since the video occupies the entire width, I changed the video width and height to a 1/3 each. Then I pasted the align center code you showed on your video at https://www.wpbeginner.com/beginners-guide/beginners-guide-how-to-center-align-a-video-in-wordpress/#respond

    But the video does not align in the center. When I look at the video in the frontend editor, I see a box with a blue line that occupies the entire width even when the video is 1/3 the width. Looks like this blue line box cannot be made smaller with any code. Is that true? Any tricks in your bag of trick that you can share?

    You have been great and thanks for your videos. you made my life so much easier.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.